<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>智慧农业——前端控制设计 | XiaoZiYan</title><meta name="keywords" content="智慧农业,PCB,前端"><meta name="author" content="XiaoZiYan"><meta name="copyright" content="XiaoZiYan"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="智慧农业PCB前端">
<meta property="og:type" content="article">
<meta property="og:title" content="智慧农业——前端控制设计">
<meta property="og:url" content="https://xiaoziyanxiaoludan.gitee.io/xiaoziyan/2021/08/05/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E5%89%8D%E7%AB%AF%E8%AE%BE%E8%AE%A1/index.html">
<meta property="og:site_name" content="XiaoZiYan">
<meta property="og:description" content="智慧农业PCB前端">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://xiaoziyan.top/images/e610f1279851b9e6e3f4c338cfede87f.jpeg">
<meta property="article:published_time" content="2021-08-05T10:12:02.000Z">
<meta property="article:modified_time" content="2022-11-03T10:28:21.332Z">
<meta property="article:author" content="XiaoZiYan">
<meta property="article:tag" content="智慧农业">
<meta property="article:tag" content="PCB">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://xiaoziyan.top/images/e610f1279851b9e6e3f4c338cfede87f.jpeg"><link rel="shortcut icon" href="/xiaoziyan/img/favicon.png"><link rel="canonical" href="https://xiaoziyanxiaoludan.gitee.io/xiaoziyan/2021/08/05/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E5%89%8D%E7%AB%AF%E8%AE%BE%E8%AE%A1/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta/><link rel="stylesheet" href="/xiaoziyan/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/xiaoziyan/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: XiaoZiYan","link":"链接: ","source":"来源: XiaoZiYan","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: false,
  isanchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '智慧农业——前端控制设计',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-11-03 18:28:21'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="./css/custom.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/hexo-electric-clock@1.0.6/clock.css"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/xiaoziyan/img/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/xiaoziyan/archives/"><div class="headline">文章</div><div class="length-num">33</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/xiaoziyan/tags/"><div class="headline">标签</div><div class="length-num">41</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/xiaoziyan/categories/"><div class="headline">分类</div><div class="length-num">39</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/xiaoziyan/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 多媒体</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/xiaoziyan/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/xiaoziyan/movies/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('http://xiaoziyan.top/images/e610f1279851b9e6e3f4c338cfede87f.jpeg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/xiaoziyan/">XiaoZiYan</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/xiaoziyan/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 多媒体</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/xiaoziyan/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/xiaoziyan/movies/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/xiaoziyan/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">智慧农业——前端控制设计</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-08-05T10:12:02.000Z" title="发表于 2021-08-05 18:12:02">2021-08-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-11-03T10:28:21.332Z" title="更新于 2022-11-03 18:28:21">2022-11-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/xiaoziyan/categories/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/">智慧农业</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/xiaoziyan/categories/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/PCB/">PCB</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/xiaoziyan/categories/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/PCB/%E5%89%8D%E7%AB%AF/">前端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="智慧农业——前端控制设计"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="选题的背景及意义"><a href="#选题的背景及意义" class="headerlink" title="选题的背景及意义"></a>选题的背景及意义</h2><p>  智慧农业是实现农业现代化发展的重要途径,发展智慧农业有助于我国农业发展方式转型、改善传统农业生产模式及服务方式,解决环境污染问题,推动农业可持续发展。在政府政策的支持下,我国智慧农业发展迅猛,商业模式不断丰富、农业价值链不断突显,应用领域和范围不断拓展。随着武威市乡村振兴战略的全力推进和5G通信技术的普及，给智慧农业提供了更多更科学高效的解决方案。</p>
<p>  我将结合所学的知识和本学期的前端课程，开发一套基于物联网的智慧农业管理系统，由于这里是前端大作业，所以硬件部分我将简要概述，重点说明管理网站的设计。 </p>
<h3 id="实现技术及项目运行环境说明"><a href="#实现技术及项目运行环境说明" class="headerlink" title="实现技术及项目运行环境说明"></a>实现技术及项目运行环境说明</h3><h4 id="硬件："><a href="#硬件：" class="headerlink" title="硬件："></a>硬件：</h4><p>PC、云服务器、STM32最小系统、温湿度传感器、光照度传感器、土壤湿度传感器、NBIOT通讯模块。</p>
<h4 id="软件环境："><a href="#软件环境：" class="headerlink" title="软件环境："></a>软件环境：</h4><p>WebStorm2020、java、node.js</p>
<h4 id="使用框架："><a href="#使用框架：" class="headerlink" title="使用框架："></a>使用框架：</h4><p><code>JQuery</code>、<code>echarts</code>、<code>layui</code></p>
<h3 id="需求分析"><a href="#需求分析" class="headerlink" title="需求分析"></a>需求分析</h3><h4 id="硬件需求"><a href="#硬件需求" class="headerlink" title="硬件需求"></a>硬件需求</h4><p>​    硬件部分要求实现大棚数据的收集，将数据上传到云服务器，接收服务器下发的指令，并做出相应动作。</p>
<h4 id="云服务器需求"><a href="#云服务器需求" class="headerlink" title="云服务器需求"></a>云服务器需求</h4><p>​    云服务器必须满足将NBIOT上传的数据存储在本地，并可以通过建立WebSocket服务将最新一条数据下发给前端使用，还需要下发开风扇、开关遮阳帘等操作的指令。</p>
<h4 id="前端网页需求"><a href="#前端网页需求" class="headerlink" title="前端网页需求"></a>前端网页需求</h4><p>​    在前端网站上，首先需要有系统登录功能（为了简便账户密码可以使用JSON数据），其次需要把云服务器下发的温湿度等数据通过直观的仪表盘、图表等形式显示出来，推荐使用echarts框架。再者，需要有轮播图展示农场的最新动态。最后，当温度等信息达到警戒值时，系统自动或手动发送打开遮阳帘、排气风扇操作指令给云服务器，同时配有相应的动态效果。</p>
<h3 id="系统设计（包括：系统的模块结构设计、数据存储的设计）"><a href="#系统设计（包括：系统的模块结构设计、数据存储的设计）" class="headerlink" title="系统设计（包括：系统的模块结构设计、数据存储的设计）"></a>系统设计（包括：系统的模块结构设计、数据存储的设计）</h3><ul>
<li><p>硬件模块：STM32模块接收处理来自各个传感器的数据，将数据打包，最后通过串口和AT指令的形式控制NBIOT模块上传数据。</p>
</li>
<li><p>云服务器：建立TCP Server负责接收来自NBIOT模块的信息，并将数据存储起来，下发前端控制指令给STM32模块。建立WebSocket服务，将最新一条消息下发给前端使用。</p>
</li>
<li><p>系统登录页：将用户名和密码存储在JSON文件中，登录时使用ajax获取JSON数据做登录验证。</p>
</li>
<li><p>实时温度模块：连接云服务器，获取到最新的一组数据，裁切出时间和温度字段，通过仪表盘显示出来。</p>
</li>
<li><p>实时湿度模块：连接云服务器，获取到最新的一组数据，裁切出时间和湿度字段，通过人体湿度表格显示出来。</p>
</li>
<li><p>实时光照强度模块：连接云服务器，获取到最新的一组数据，裁切出时间和光照强度字段，通过仪表盘显示出来。</p>
</li>
<li><p>实时土壤湿度模块：连接云服务器，获取到最新的一组数据，裁切出时间和土壤湿度字段，通过水球水量显示出来。</p>
</li>
<li><p>主页：规划出四个等同大小的盒子，用于存放各种实时数据的页面，两个等同大小的盒子用于存放遮阳帘、风扇。页面中间存放轮播图和控制中心按钮，还有大棚浇水。</p>
</li>
</ul>
<p><strong>（9）整体结构设计图如图1 所示，前端结构图如图2所示</strong></p>
<p><img src="http://xiaoziyan.top/images/clip_image002.png" alt=" 图1 系统总体结构图"></p>
<p>​                    <img src="http://xiaoziyan.top/images/clip_image004.png" alt=" 图2 前端结构设计图"></p>
<h3 id="具体实现"><a href="#具体实现" class="headerlink" title="具体实现"></a>具体实现</h3><p>**（1）硬件部分，不展开论述，最终成果图如图3所示 ，详情转到<a href="https://xiaoziyanxiaoludan.gitee.io/xiaoziyan/2021/08/02/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E7%A1%AC%E4%BB%B6%E8%AE%BE%E8%AE%A1/">智慧农业 —— 硬件设计</a>查看 **</p>
<p> <img src="http://xiaoziyan.top/images/clip_image006.jpg" alt="图3 效果图"></p>
<p>**（2）云服务器模块，如图4所示 ** </p>
<p><img src="http://xiaoziyan.top/images/clip_image008.jpg" alt="图4 云服务器模块"></p>
<p><strong>（3）前端登录页面：使用输入框输入账户和密码，使用ajax获取账户密码JSON文件，当用户点击登录后，获取账户和密码与JSON数据做比较。实现如图5所示。关键代码如下：</strong></p>
<p><img src="http://xiaoziyan.top/images/clip_image010.jpg" alt=" 图5 登录页面"> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    $(<span class="string">&quot;#submit&quot;</span>).click(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> name = $(<span class="string">&quot;#username&quot;</span>).val();</span><br><span class="line">        <span class="keyword">var</span> pass = $(<span class="string">&quot;#password&quot;</span>).val();</span><br><span class="line"></span><br><span class="line">        <span class="comment">//获取json格式的文本内容</span></span><br><span class="line">        <span class="comment">//登录账户密码验证</span></span><br><span class="line">        $.ajax(&#123;</span><br><span class="line">            <span class="attr">type</span>: <span class="string">&quot;get&quot;</span>,</span><br><span class="line">            <span class="attr">url</span>: <span class="string">&quot;users.json&quot;</span>,</span><br><span class="line">            <span class="attr">dataType</span>: <span class="string">&quot;json&quot;</span>,</span><br><span class="line">            <span class="attr">success</span>: <span class="function"><span class="keyword">function</span> (<span class="params">res</span>) </span>&#123;</span><br><span class="line">                <span class="keyword">var</span> list = res.animals</span><br><span class="line">                <span class="built_in">console</span>.log(list)</span><br><span class="line">                <span class="comment">/*alert(list[0].username)*/</span></span><br><span class="line">                <span class="keyword">for</span> (<span class="keyword">var</span> $i = <span class="number">0</span>; $i &lt; list.length; $i++) &#123;</span><br><span class="line">                    <span class="keyword">if</span> (list[$i].username == name) &#123;</span><br><span class="line">                        <span class="keyword">if</span> (list[$i].password == pass) &#123;</span><br><span class="line">                            <span class="comment">/*alert(&quot;登录成功&quot;)*/</span></span><br><span class="line">                            location.href = <span class="string">&quot;./index.html?username=&quot;</span>+name;</span><br><span class="line">                            <span class="keyword">return</span>;</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                    <span class="keyword">if</span> ($i == list.length - <span class="number">1</span>) &#123;</span><br><span class="line">                        alert(<span class="string">&quot;账户或密码错误&quot;</span>);</span><br><span class="line">                        <span class="keyword">return</span>;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line"></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<p>** (4)注册页面 基本原理和登录页面一样，如图6所示。 ** </p>
<p><img src="http://xiaoziyan.top/images/clip_image012.jpg" alt=" 图6 注册页面"> </p>
<p><strong>（5）实时温度模块，使用WebSocket和服务器连接获取最新数据，并使用仪表盘显示出来。如图7所示，实时湿度、实时光照度、实时土壤湿度分别如图8、9、10所示。</strong></p>
<p><img src="http://xiaoziyan.top/images/image-20211010125637642.png" alt="图7实时温度"></p>
<p><img src="http://xiaoziyan.top/images/image-20211010125712464.png" alt="图8 实时空气湿度"></p>
<p><img src="http://xiaoziyan.top/images/image-20211010125812865.png" alt="图9 实时光照强度"></p>
<p><img src="http://xiaoziyan.top/images/image-20211010125843710.png" alt="图10 实时土壤湿度"></p>
<p>其中与服务器连接代码如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//连接webSocket获取实时温湿度数据</span></span><br><span class="line"><span class="keyword">if</span> (<span class="built_in">window</span>.WebSocket) &#123;</span><br><span class="line">    <span class="keyword">var</span> ws = <span class="keyword">new</span> WebSocket(<span class="string">&#x27;ws://39.98.198.224:888&#x27;</span>);</span><br><span class="line">    ws.onopen = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;连接服务器成功&quot;</span>);</span><br><span class="line">        ws.send(<span class="string">&quot; &quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    ws.onmessage = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">        TempData=e.data;</span><br><span class="line">        TempData=TempData.split(<span class="string">&quot; &quot;</span>);</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    ws.onclose = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;服务器关闭&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    ws.onerror = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;连接出错&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>（6）大棚遮阳帘控制模块 使用遍历的方法更换背景图片，以达到逐帧动画的效果。效果图如图11所示</strong></p>
<p>实现代码如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> pic = [<span class="string">&quot;img/g1.png&quot;</span>, <span class="string">&quot;img/g2.png&quot;</span>, <span class="string">&quot;img/g3.png&quot;</span>, <span class="string">&quot;img/g4.png&quot;</span>, <span class="string">&quot;img/g5.png&quot;</span>, <span class="string">&quot;img/g6.png&quot;</span>, <span class="string">&quot;img/g7.png&quot;</span></span><br><span class="line">   , <span class="string">&quot;img/g8.png&quot;</span>, <span class="string">&quot;img/g9.png&quot;</span>, <span class="string">&quot;img/g10.png&quot;</span>, <span class="string">&quot;img/g11.png&quot;</span>, <span class="string">&quot;img/g12.png&quot;</span>, <span class="string">&quot;img/g13.png&quot;</span>];</span><br><span class="line">pic = pic.reverse();  <span class="comment">//第一次数组倒序，因为下面需要，所以就懒得换数组了</span></span><br><span class="line"><span class="comment">/*遮阳帘开关函数*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">picStart</span>(<span class="params">pic</span>) </span>&#123;</span><br><span class="line">   <span class="keyword">var</span> i = <span class="number">0</span>;</span><br><span class="line">   <span class="keyword">var</span> time = <span class="literal">null</span>;</span><br><span class="line">   time = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">if</span> (i != pic.length) &#123;</span><br><span class="line">         $(<span class="string">&quot;#img&quot;</span>)[<span class="number">0</span>].src = pic[i];</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">         <span class="built_in">clearInterval</span>(time);</span><br><span class="line">         i = <span class="number">0</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      i++;</span><br><span class="line"></span><br><span class="line">   &#125;, <span class="number">100</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><img src="http://xiaoziyan.top/images/image-20211010124332635.png" alt="图11 大棚遮阳帘"></p>
<p><strong>（7）大棚浇水系统，设置按钮点击事件，点击后开启下雨效果，再次点击关闭下雨效果。效果如图12所示。</strong></p>
<p>下雨关键代码如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*大棚浇水系统*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">rain</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">   $(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">var</span> canvas = $(<span class="string">&#x27;#canvas&#x27;</span>)[<span class="number">0</span>];</span><br><span class="line">      <span class="comment">/*       canvas.width = document.getInstanceById(&quot;rain&quot;).innerWidth;</span></span><br><span class="line"><span class="comment">                          canvas.height = document.getInstanceById(&quot;rain&quot;).innerHeight;*/</span></span><br><span class="line">      <span class="keyword">if</span> (canvas.getContext) &#123;</span><br><span class="line">         <span class="keyword">var</span> ctx = canvas.getContext(<span class="string">&#x27;2d&#x27;</span>);</span><br><span class="line">         <span class="keyword">var</span> w = canvas.width;</span><br><span class="line">         <span class="keyword">var</span> h = canvas.height;</span><br><span class="line">         ctx.strokeStyle = <span class="string">&#x27;rgba(174,194,224,0.8)&#x27;</span>;</span><br><span class="line">         ctx.lineWidth = <span class="number">1</span>;</span><br><span class="line">         ctx.lineCap = <span class="string">&#x27;round&#x27;</span>;</span><br><span class="line">         <span class="keyword">var</span> init = [];</span><br><span class="line">         <span class="keyword">var</span> maxParts = <span class="number">1000</span>;</span><br><span class="line">         <span class="keyword">for</span> (<span class="keyword">var</span> a = <span class="number">0</span>; a &lt; maxParts; a++) &#123;</span><br><span class="line">            init.push(&#123;</span><br><span class="line">               <span class="attr">x</span>: <span class="built_in">Math</span>.random() * w,</span><br><span class="line">               <span class="attr">y</span>: <span class="built_in">Math</span>.random() * h,</span><br><span class="line">               <span class="attr">l</span>: <span class="built_in">Math</span>.random() * <span class="number">1</span>,</span><br><span class="line">               <span class="attr">xs</span>: -<span class="number">4</span> + <span class="built_in">Math</span>.random() * <span class="number">4</span> + <span class="number">2</span>,</span><br><span class="line">               <span class="attr">ys</span>: <span class="built_in">Math</span>.random() * <span class="number">10</span> + <span class="number">10</span></span><br><span class="line">            &#125;)</span><br><span class="line">         &#125;</span><br><span class="line">         <span class="keyword">var</span> particles = [];</span><br><span class="line">         <span class="keyword">for</span> (<span class="keyword">var</span> b = <span class="number">0</span>; b &lt; maxParts; b++) &#123;</span><br><span class="line">            particles[b] = init[b];</span><br><span class="line">         &#125;</span><br><span class="line"></span><br><span class="line">         <span class="function"><span class="keyword">function</span> <span class="title">draw</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            ctx.clearRect(<span class="number">0</span>, <span class="number">0</span>, w, h);</span><br><span class="line">            <span class="keyword">for</span> (<span class="keyword">var</span> c = <span class="number">0</span>; c &lt; particles.length; c++) &#123;</span><br><span class="line">               <span class="keyword">var</span> p = particles[c];</span><br><span class="line">               ctx.beginPath();</span><br><span class="line">               ctx.moveTo(p.x, p.y);</span><br><span class="line">               ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys);</span><br><span class="line">               ctx.stroke();</span><br><span class="line">            &#125;</span><br><span class="line">            move();</span><br><span class="line">            <span class="keyword">if</span>(flag1==<span class="number">0</span>)&#123;</span><br><span class="line">               <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">               ctx.clearRect(<span class="number">0</span>, <span class="number">0</span>, w, h);</span><br><span class="line">            &#125;</span><br><span class="line">         &#125;</span><br><span class="line">         <span class="function"><span class="keyword">function</span> <span class="title">move</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="keyword">for</span> (<span class="keyword">var</span> b = <span class="number">0</span>; b &lt; particles.length; b++) &#123;</span><br><span class="line">               <span class="keyword">var</span> p = particles[b];</span><br><span class="line">               p.x += p.xs;</span><br><span class="line">               p.y += p.ys;</span><br><span class="line">               <span class="keyword">if</span> (p.x &gt; w || p.y &gt; h) &#123;</span><br><span class="line">                  p.x = <span class="built_in">Math</span>.random() * w;</span><br><span class="line">                  p.y = -<span class="number">20</span>;</span><br><span class="line">               &#125;</span><br><span class="line">            &#125;</span><br><span class="line">         &#125;</span><br><span class="line">         timer=<span class="built_in">setInterval</span>(draw, <span class="number">30</span>);</span><br><span class="line">      &#125;</span><br><span class="line">   &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p> <img src="http://xiaoziyan.top/images/clip_image024.jpg" alt="图12 大浇水"> </p>
<p><strong>（8）大棚排气风扇。排气风扇设置三档，一次提速，使用css3实现。效果如图13所示。</strong><br><img src="http://xiaoziyan.top/images/clip_image026.jpg" alt=" 图13 排气风扇"> </p>
<p><strong>（9）总体预览图如图14所示</strong></p>
<p><img src="http://xiaoziyan.top/images/clip_image028.jpg" alt="图14 总体预览图"> </p>
<h2 id="更多源码附件"><a href="#更多源码附件" class="headerlink" title="更多源码附件"></a>更多源码附件</h2><h3 id="登录页login-html"><a href="#登录页login-html" class="headerlink" title="登录页login.html"></a>登录页login.html</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>智慧农业系统登录页<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;css/login.css&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">        <span class="selector-tag">html</span>, <span class="selector-tag">body</span> &#123;</span></span><br><span class="line"><span class="css">            <span class="attribute">height</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">body</span> &#123;</span></span><br><span class="line"><span class="css">            <span class="attribute">font</span>: <span class="number">12px</span> <span class="string">&#x27;Lucida Sans Unicode&#x27;</span>, <span class="string">&#x27;Trebuchet MS&#x27;</span>, Arial, Helvetica;</span></span><br><span class="line"><span class="css">            <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&#x27;./img/bgimg.jpg&#x27;</span>) no-repeat;</span></span><br><span class="line"><span class="css">            <span class="attribute">background-size</span>: cover;</span></span><br><span class="line"><span class="css">            -webkit-<span class="attribute">background-size</span>: cover;</span></span><br><span class="line"><span class="css">            -o-<span class="attribute">background-size</span>: cover;</span></span><br><span class="line"><span class="css">            <span class="attribute">background-position</span>: center <span class="number">0</span>;</span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">        <span class="selector-id">#login</span> &#123;</span></span><br><span class="line"><span class="css">            <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">background-image</span>: <span class="built_in">-webkit-gradient</span>(linear, left top, left bottom, <span class="built_in">from</span>(<span class="number">#fff</span>), <span class="built_in">to</span>(<span class="number">#eee</span>));</span></span><br><span class="line"><span class="css">            <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>(top, <span class="number">#fff</span>, <span class="number">#eee</span>);</span></span><br><span class="line"><span class="css">            <span class="attribute">background-image</span>: <span class="built_in">-moz-linear-gradient</span>(top, <span class="number">#fff</span>, <span class="number">#eee</span>);</span></span><br><span class="line"><span class="css">            <span class="attribute">background-image</span>: <span class="built_in">-ms-linear-gradient</span>(top, <span class="number">#fff</span>, <span class="number">#eee</span>);</span></span><br><span class="line"><span class="css">            <span class="attribute">background-image</span>: <span class="built_in">-o-linear-gradient</span>(top, <span class="number">#fff</span>, <span class="number">#eee</span>);</span></span><br><span class="line"><span class="css">            <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(top, <span class="number">#fff</span>, <span class="number">#eee</span>);</span></span><br><span class="line"><span class="css">            <span class="attribute">height</span>: <span class="number">240px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">width</span>: <span class="number">400px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">margin</span>: -<span class="number">150px</span> <span class="number">0</span> <span class="number">0</span> -<span class="number">230px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">padding</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">            <span class="attribute">top</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">z-index</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">            -moz-<span class="attribute">border-radius</span>: <span class="number">3px</span>;</span></span><br><span class="line"><span class="css">            -webkit-<span class="attribute">border-radius</span>: <span class="number">3px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span></span><br><span class="line"><span class="css">            -webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>),</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">1px</span> <span class="number">1px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">2</span>),</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">3px</span> <span class="number">0</span> <span class="number">#fff</span>,</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">4px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">2</span>),</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">6px</span> <span class="number">0</span> <span class="number">#fff</span>,</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">7px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">2</span>);</span></span><br><span class="line"><span class="css">            -moz-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>),</span></span><br><span class="line"><span class="css">            <span class="number">1px</span> <span class="number">1px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">1</span>),</span></span><br><span class="line"><span class="css">            <span class="number">3px</span> <span class="number">3px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">1</span>),</span></span><br><span class="line"><span class="css">            <span class="number">4px</span> <span class="number">4px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">1</span>),</span></span><br><span class="line"><span class="css">            <span class="number">6px</span> <span class="number">6px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">1</span>),</span></span><br><span class="line"><span class="css">            <span class="number">7px</span> <span class="number">7px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">1</span>);</span></span><br><span class="line"><span class="css">            <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>),</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">1px</span> <span class="number">1px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">2</span>),</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">3px</span> <span class="number">0</span> <span class="number">#fff</span>,</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">4px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">2</span>),</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">6px</span> <span class="number">0</span> <span class="number">#fff</span>,</span></span><br><span class="line"><span class="css">            <span class="number">0</span> <span class="number">7px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">2</span>);</span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">        <span class="selector-id">#login</span>:before &#123;</span></span><br><span class="line"><span class="css">            content: <span class="string">&#x27;&#x27;</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">            <span class="attribute">z-index</span>: -<span class="number">1</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">border</span>: <span class="number">1px</span> dashed <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">top</span>: <span class="number">5px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">bottom</span>: <span class="number">5px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">left</span>: <span class="number">5px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">right</span>: <span class="number">5px</span>;</span></span><br><span class="line"><span class="css">            -moz-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">            -webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">id</span>=<span class="string">&quot;boby&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">id</span>=<span class="string">&quot;login&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">th</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>智慧农业系统登录<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">fieldset</span> <span class="attr">id</span>=<span class="string">&quot;inputs&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;username&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;用户名&quot;</span> <span class="attr">autofocus</span> <span class="attr">required</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;password&quot;</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;密码&quot;</span> <span class="attr">required</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">fieldset</span> <span class="attr">id</span>=<span class="string">&quot;actions&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">id</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;登录&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>忘记密码<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;./register.html&quot;</span>&gt;</span>注册用户<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./js/jquery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;layui/layui.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    layui.use(<span class="string">&quot;layer&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> layer = layui.layer;</span></span><br><span class="line"><span class="javascript">        layer.open(&#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">type</span>: <span class="number">1</span></span></span><br><span class="line"><span class="javascript">            , <span class="attr">offset</span>: <span class="string">&#x27;auto&#x27;</span> <span class="comment">//垂直水平居中</span></span></span><br><span class="line"><span class="javascript">            <span class="comment">//,id: &#x27;layerDemo&#x27;+type //防止重复弹出</span></span></span><br><span class="line"><span class="javascript">            , <span class="attr">content</span>: <span class="string">&#x27;&lt;div style=&quot;padding: 20px 100px;&quot;&gt;&#x27;</span> + <span class="string">&#x27;账户名和密码在本地JSON文件里面&#x27;</span> + <span class="string">&#x27;&lt;/div&gt;&#x27;</span></span></span><br><span class="line"><span class="javascript">            , <span class="attr">btn</span>: <span class="string">&#x27;关闭全部&#x27;</span></span></span><br><span class="line"><span class="javascript">            , <span class="attr">btnAlign</span>: <span class="string">&#x27;c&#x27;</span> <span class="comment">//按钮居中</span></span></span><br><span class="line"><span class="javascript">            , <span class="attr">shade</span>: <span class="number">0</span> <span class="comment">//不显示遮罩</span></span></span><br><span class="line"><span class="javascript">            , <span class="attr">yes</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">                layer.closeAll();</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    $(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        $(<span class="string">&quot;#submit&quot;</span>).click(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">var</span> name = $(<span class="string">&quot;#username&quot;</span>).val();</span></span><br><span class="line"><span class="javascript">            <span class="keyword">var</span> pass = $(<span class="string">&quot;#password&quot;</span>).val();</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">            <span class="comment">//获取json格式的文本内容</span></span></span><br><span class="line"><span class="javascript">            <span class="comment">//登录账户密码验证</span></span></span><br><span class="line"><span class="javascript">            $.ajax(&#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">type</span>: <span class="string">&quot;get&quot;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">url</span>: <span class="string">&quot;users.json&quot;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">dataType</span>: <span class="string">&quot;json&quot;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">success</span>: <span class="function"><span class="keyword">function</span> (<span class="params">res</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> list = res.animals</span></span><br><span class="line"><span class="javascript">                    <span class="built_in">console</span>.log(list)</span></span><br><span class="line"><span class="javascript">                    <span class="comment">/*alert(list[0].username)*/</span></span></span><br><span class="line"><span class="javascript">                    <span class="keyword">for</span> (<span class="keyword">var</span> $i = <span class="number">0</span>; $i &lt; list.length; $i++) &#123;</span></span><br><span class="line"><span class="javascript">                        <span class="keyword">if</span> (list[$i].username == name) &#123;</span></span><br><span class="line"><span class="javascript">                            <span class="keyword">if</span> (list[$i].password == pass) &#123;</span></span><br><span class="line"><span class="javascript">                                <span class="comment">/*alert(&quot;登录成功&quot;)*/</span></span></span><br><span class="line"><span class="javascript">                                location.href = <span class="string">&quot;./index.html?username=&quot;</span>+name;</span></span><br><span class="line"><span class="javascript">                                <span class="keyword">return</span>;</span></span><br><span class="line"><span class="javascript">                            &#125;</span></span><br><span class="line"><span class="javascript">                        &#125;</span></span><br><span class="line"><span class="javascript">                        <span class="keyword">if</span> ($i == list.length - <span class="number">1</span>) &#123;</span></span><br><span class="line"><span class="javascript">                            alert(<span class="string">&quot;账户或密码错误&quot;</span>);</span></span><br><span class="line"><span class="javascript">                            <span class="keyword">return</span>;</span></span><br><span class="line"><span class="javascript">                        &#125;</span></span><br><span class="line"><span class="javascript">                    &#125;</span></span><br><span class="line"><span class="javascript">                &#125;</span></span><br><span class="line"><span class="javascript">            &#125;);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">        &#125;)</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="登录页样式login-css"><a href="#登录页样式login-css" class="headerlink" title="登录页样式login.css"></a>登录页样式login.css</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="selector-tag">h1</span></span><br><span class="line">    &#123;  </span><br><span class="line">        <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, .<span class="number">7</span>), <span class="number">0px</span> <span class="number">2px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">5</span>);  </span><br><span class="line">        <span class="attribute">text-transform</span>: uppercase;  </span><br><span class="line">        <span class="attribute">text-align</span>: center;  </span><br><span class="line">        <span class="attribute">color</span>: <span class="number">#666</span>;  </span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">30px</span> <span class="number">0</span>;  </span><br><span class="line">        <span class="attribute">letter-spacing</span>: <span class="number">4px</span>;  </span><br><span class="line">        <span class="attribute">font</span>: normal <span class="number">26px</span>/<span class="number">1</span> Verdana, Helvetica;  </span><br><span class="line">        <span class="attribute">position</span>: relative;  </span><br><span class="line">    &#125;  </span><br><span class="line">     </span><br><span class="line">    <span class="selector-tag">h1</span>:after, h1:before  </span><br><span class="line">    &#123;  </span><br><span class="line">        background-color: <span class="number">#777</span>;  </span><br><span class="line">        <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;  </span><br><span class="line">        <span class="attribute">height</span>: <span class="number">1px</span>;  </span><br><span class="line">        <span class="attribute">position</span>: absolute;  </span><br><span class="line">        <span class="attribute">top</span>: <span class="number">15px</span>;  </span><br><span class="line">        <span class="attribute">width</span>: <span class="number">120px</span>;  </span><br><span class="line">    &#125;  </span><br><span class="line">     </span><br><span class="line">    <span class="selector-tag">h1</span>:after  </span><br><span class="line">    &#123;  </span><br><span class="line">        background-image: <span class="built_in">-webkit-gradient</span>(linear, left top, right top, <span class="built_in">from</span>(<span class="number">#777</span>), <span class="built_in">to</span>(<span class="number">#fff</span>));  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>(left, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">-moz-linear-gradient</span>(left, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">-ms-linear-gradient</span>(left, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">-o-linear-gradient</span>(left, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(left, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">right</span>: <span class="number">0</span>;  </span><br><span class="line">    &#125;  </span><br><span class="line">     </span><br><span class="line">    <span class="selector-tag">h1</span>:before  </span><br><span class="line">    &#123;  </span><br><span class="line">        background-image: <span class="built_in">-webkit-gradient</span>(linear, right top, left top, <span class="built_in">from</span>(<span class="number">#777</span>), <span class="built_in">to</span>(<span class="number">#fff</span>));  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>(right, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">-moz-linear-gradient</span>(right, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">-ms-linear-gradient</span>(right, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">-o-linear-gradient</span>(right, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(right, <span class="number">#777</span>, <span class="number">#fff</span>);  </span><br><span class="line">        <span class="attribute">left</span>: <span class="number">0</span>;  </span><br><span class="line">    &#125; </span><br><span class="line">    <span class="comment">/*--------------------*/</span></span><br><span class="line"> </span><br><span class="line"><span class="selector-tag">fieldset</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/*--------------------*/</span></span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#inputs</span> <span class="selector-tag">input</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#f1f1f1</span> <span class="built_in">url</span>(<span class="string">http://www.red-team-design.com/wp-content/uploads/2011/09/login-sprite.png</span>) no-repeat;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">15px</span> <span class="number">15px</span> <span class="number">15px</span> <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">353px</span>; <span class="comment">/* 353 + 2 + 45 = 400 */</span></span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">    -moz-<span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    -webkit-<span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    -moz-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">1px</span> <span class="number">#ccc</span> inset, <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#fff</span>;</span><br><span class="line">    -webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">1px</span> <span class="number">#ccc</span> inset, <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">1px</span> <span class="number">#ccc</span> inset, <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#username</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">5px</span> -<span class="number">2px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#password</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">5px</span> -<span class="number">52px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#inputs</span> <span class="selector-tag">input</span><span class="selector-pseudo">:focus</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#e8c291</span>;</span><br><span class="line">    <span class="attribute">outline</span>: none;</span><br><span class="line">    -moz-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="number">#e8c291</span> inset;</span><br><span class="line">    -webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="number">#e8c291</span> inset;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="number">#e8c291</span> inset;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/*--------------------*/</span></span><br><span class="line"><span class="selector-id">#actions</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">25px</span> <span class="number">0</span> <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#submit</span></span><br><span class="line">&#123;	</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ffb94b</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-webkit-gradient</span>(linear, left top, left bottom, <span class="built_in">from</span>(<span class="number">#fddb6f</span>), <span class="built_in">to</span>(<span class="number">#ffb94b</span>));</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>(top, <span class="number">#fddb6f</span>, <span class="number">#ffb94b</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-moz-linear-gradient</span>(top, <span class="number">#fddb6f</span>, <span class="number">#ffb94b</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-ms-linear-gradient</span>(top, <span class="number">#fddb6f</span>, <span class="number">#ffb94b</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-o-linear-gradient</span>(top, <span class="number">#fddb6f</span>, <span class="number">#ffb94b</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(top, <span class="number">#fddb6f</span>, <span class="number">#ffb94b</span>);</span><br><span class="line">    </span><br><span class="line">    -moz-<span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">    -webkit-<span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.5</span>);</span><br><span class="line">    </span><br><span class="line">     -moz-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.3</span>), <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.3</span>) inset;</span><br><span class="line">     -webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.3</span>), <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.3</span>) inset;</span><br><span class="line">     <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.3</span>), <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.3</span>) inset;    </span><br><span class="line">    </span><br><span class="line">    <span class="attribute">border-width</span>: <span class="number">1px</span>;</span><br><span class="line">    <span class="attribute">border-style</span>: solid;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#d69e31</span> <span class="number">#e3a037</span> <span class="number">#d5982d</span> <span class="number">#e3a037</span>;</span><br><span class="line"> </span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">35px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">    <span class="attribute">font</span>: bold <span class="number">15px</span> Arial, Helvetica;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#8f5a0a</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#submit</span><span class="selector-pseudo">:hover</span>,<span class="selector-id">#submit</span><span class="selector-pseudo">:focus</span></span><br><span class="line">&#123;		</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#fddb6f</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-webkit-gradient</span>(linear, left top, left bottom, <span class="built_in">from</span>(<span class="number">#ffb94b</span>), <span class="built_in">to</span>(<span class="number">#fddb6f</span>));</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>(top, <span class="number">#ffb94b</span>, <span class="number">#fddb6f</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-moz-linear-gradient</span>(top, <span class="number">#ffb94b</span>, <span class="number">#fddb6f</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-ms-linear-gradient</span>(top, <span class="number">#ffb94b</span>, <span class="number">#fddb6f</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-o-linear-gradient</span>(top, <span class="number">#ffb94b</span>, <span class="number">#fddb6f</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(top, <span class="number">#ffb94b</span>, <span class="number">#fddb6f</span>);</span><br><span class="line">&#125;	</span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#submit</span><span class="selector-pseudo">:active</span></span><br><span class="line">&#123;		</span><br><span class="line">    <span class="attribute">outline</span>: none;</span><br><span class="line">   </span><br><span class="line">     -moz-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.5</span>) inset;</span><br><span class="line">     -webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.5</span>) inset;</span><br><span class="line">     <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.5</span>) inset;		</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#submit</span>::-moz-focus-inner</span><br><span class="line">&#123;</span><br><span class="line">  border: none;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#actions</span> <span class="selector-tag">a</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#3151A2</span>;    </span><br><span class="line">    <span class="attribute">float</span>: right;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">35px</span>;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/*--------------------*/</span></span><br><span class="line"> </span><br><span class="line"><span class="selector-id">#back</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">60px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="首页index-html"><a href="#首页index-html" class="headerlink" title="首页index.html"></a>首页index.html</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>智慧农业首页<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;./layui/css/layui.css&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;./css/index.css&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;./css/fan.css&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">			<span class="selector-class">.sun-btn</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">				<span class="comment">/*background-color: #92B8B1;*/</span></span></span><br><span class="line"><span class="css">				<span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="css">				<span class="attribute">border</span>: black <span class="number">1px</span> solid;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-class">.sun-btn</span> <span class="selector-tag">h2</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">45px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">color</span>: black;</span></span><br><span class="line"><span class="css">				<span class="attribute">line-height</span>: <span class="number">45px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">font-size</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">				<span class="attribute">border</span>: black <span class="number">1px</span> solid;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-class">.fan-btn</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">				<span class="comment">/*background-color: #8D8D8D;*/</span></span></span><br><span class="line"><span class="css">				<span class="attribute">float</span>: right;</span></span><br><span class="line"><span class="css">				<span class="attribute">border</span>: black <span class="number">1px</span> solid;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-class">.fan-btn</span> <span class="selector-tag">h2</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">45px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">color</span>: black;</span></span><br><span class="line"><span class="css">				<span class="attribute">line-height</span>: <span class="number">45px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">font-size</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">				<span class="attribute">border</span>: black <span class="number">1px</span> solid;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-class">.water</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">clear</span>: both;</span></span><br><span class="line"><span class="css">				<span class="attribute">border</span>: black <span class="number">1px</span> solid;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-class">.water</span> <span class="selector-tag">h2</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">45px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">color</span>: black;</span></span><br><span class="line"><span class="css">				<span class="attribute">line-height</span>: <span class="number">45px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">font-size</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">				<span class="attribute">border</span>: black <span class="number">1px</span> solid;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-class">.water</span> <span class="selector-class">.rain</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: <span class="number">#8D8D8D</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;./img/rain.jpg&quot;</span>) no-repeat;</span></span><br><span class="line"><span class="css">				<span class="attribute">background-position</span>: left;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-id">#canvas</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">170px</span>;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="comment">/*下雨按钮*/</span></span></span><br><span class="line"><span class="css">			<span class="selector-class">.btn2</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">display</span>: block;</span></span><br><span class="line"><span class="css">				<span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="css">				<span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span></span><br><span class="line"><span class="css">				appearance: none;</span></span><br><span class="line"><span class="css">				<span class="attribute">outline</span>: none;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-class">.btn2</span><span class="selector-pseudo">::before</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>:<span class="number">40px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">background</span>: gray;</span></span><br><span class="line"><span class="css">				<span class="attribute">border-radius</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">box-sizing</span>: <span class="number">0</span> <span class="number">3px</span> <span class="number">#000</span>;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-class">.btn2</span><span class="selector-pseudo">::after</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">				<span class="attribute">top</span>: <span class="number">2px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">left</span>: <span class="number">62px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">36px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">36px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">border-radius</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">box-sizing</span>: <span class="number">0</span> <span class="number">3px</span> gray;</span></span><br><span class="line"><span class="css">				<span class="attribute">background</span>: white;</span></span><br><span class="line"><span class="css">				<span class="attribute">transition</span>: all <span class="number">0.3s</span> ease-in-out;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="comment">/* 当btn 被点击触发 */</span></span></span><br><span class="line"><span class="css">			<span class="selector-class">.btn2</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">::before</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">background</span>: <span class="number">#00CED1</span>;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="comment">/* 当btn 被点击触发 */</span></span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">			<span class="selector-class">.btn2</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">::after</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">left</span>: <span class="number">2px</span>;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">		</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="comment">&lt;!-- 时间__头部 --&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h1</span>&gt;</span>小郑智慧农业系统<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;time&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;layui-nav layui-layout-right&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;layui-nav-item layui-hide layui-show-md-inline-block&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:;&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">img</span>  <span class="attr">src</span>=<span class="string">&quot;./img/logo.png&quot;</span> <span class="attr">class</span>=<span class="string">&quot;layui-nav-img&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">span</span>  <span class="attr">id</span>=<span class="string">&quot;user-name&quot;</span>&gt;</span>用户名<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">dl</span> <span class="attr">class</span>=<span class="string">&quot;layui-nav-child&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">dd</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">onclick</span>=<span class="string">&quot;x_admin_show(&#x27;切换帐号&#x27;,&#x27;http://www.baidu.com&#x27;)&quot;</span>&gt;</span>个人信息<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">dd</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">onclick</span>=<span class="string">&quot;x_admin_show(&#x27;切换帐号&#x27;,&#x27;http://www.baidu.com&#x27;)&quot;</span>&gt;</span>切换账户<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">dd</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;./login.html&quot;</span>&gt;</span>退出<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="comment">&lt;!-- 主题内容 --&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;mainbox&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;column&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 实时温度 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel bar&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>实时空气温度<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;chart&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">iframe</span> <span class="attr">id</span>=<span class="string">&quot;iframeMain1&quot;</span> <span class="attr">src</span>=<span class="string">&quot;./realData/realTemp.html&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 100%&quot;</span>; <span class="attr">height</span>=<span class="string">&quot;100%&quot;</span>; &gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel_footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 实时光照强度 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel line&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>实时光照强度<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;chart&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">iframe</span> <span class="attr">id</span>=<span class="string">&quot;iframeMain3&quot;</span> <span class="attr">src</span>=<span class="string">&quot;./realData/realIlluminance.html&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 100%&quot;</span>; <span class="attr">height</span>=<span class="string">&quot;100%&quot;</span>; &gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel_footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 饼图 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel pie&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>农业大棚遮光帘<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;chart&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;img&quot;</span> <span class="attr">src</span>=<span class="string">&quot;./img/g1.png&quot;</span> <span class="attr">height</span>=<span class="string">&quot;300&quot;</span> <span class="attr">width</span>=<span class="string">&quot;550&quot;</span>/&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel_footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;column&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 顶部数字 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;no&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;layui-carousel&quot;</span> <span class="attr">id</span>=<span class="string">&quot;test1&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">div</span> <span class="attr">carousel-item</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bg1 demo-carousel&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bg2 demo-carousel&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bg3 demo-carousel&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bg4 demo-carousel&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bg5 demo-carousel&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;map&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;map1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;map2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;map3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;chart&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;control&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>系统控制台<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;control-main&quot;</span>&gt;</span></span><br><span class="line">					<span class="comment">&lt;!--遮阳帘开关--&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;sun-btn&quot;</span> &gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">h2</span>&gt;</span>大棚遮阳帘开关<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span> <span class="attr">id</span>=<span class="string">&quot;btn1&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">					<span class="comment">&lt;!--风扇开关--&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;fan-btn&quot;</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">h2</span>&gt;</span>大棚排气风扇开关<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">					<span class="comment">&lt;!--浇水开关--&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;water&quot;</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">h2</span>&gt;</span>大棚浇水系统开关 <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn2&quot;</span> <span class="attr">id</span>=<span class="string">&quot;btn2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">						<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;rain&quot;</span> <span class="attr">id</span>=<span class="string">&quot;rain&quot;</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">&quot;canvas&quot;</span> &gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;column&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 柱形图 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel barTwo&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>实时空气湿度<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;chart&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">iframe</span> <span class="attr">id</span>=<span class="string">&quot;iframeMai2&quot;</span> <span class="attr">src</span>=<span class="string">&quot;./realData/realHumidity.html&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 100%&quot;</span>; <span class="attr">height</span>=<span class="string">&quot;100%&quot;</span>; &gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel_footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 折线图 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel lineTwo&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>实时土壤湿度<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;chart&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">iframe</span> <span class="attr">id</span>=<span class="string">&quot;iframeMain4&quot;</span> <span class="attr">src</span>=<span class="string">&quot;./realData/realTour.html&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 100%&quot;</span>; <span class="attr">height</span>=<span class="string">&quot;100%&quot;</span>; &gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel_footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 饼图 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel pieTwo&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>大棚排气风扇<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;chart&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;fan&quot;</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;switch&quot;</span> <span class="attr">checked</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;switch_0&quot;</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;switch_btn_0&quot;</span>&gt;</span>关<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;switch&quot;</span> <span class="attr">class</span>=<span class="string">&quot;switch_1&quot;</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;switch_btn_1&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;switch&quot;</span> <span class="attr">class</span>=<span class="string">&quot;switch_2&quot;</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;switch_btn_2&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;switch&quot;</span> <span class="attr">class</span>=<span class="string">&quot;switch_3&quot;</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;switch_btn_3&quot;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;mask&quot;</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;logo&quot;</span>&gt;</span>排气扇<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;line_1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;line_2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;line_3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;line_4&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;line_5&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;line_6&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;leaves&quot;</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;leaf_1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;leaf_2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;leaf_3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;header&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;panel_footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;footer&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">p</span>&gt;</span>by:2018324418-郑华总<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./layui/layui.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./js/jquery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">		<span class="comment">/*获取从login页面传过来的用户名*/</span></span></span><br><span class="line"><span class="javascript">		getQueryVariable();</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">getQueryVariable</span>(<span class="params">variable</span>)</span></span></span><br><span class="line"><span class="function"><span class="javascript">		</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> query = <span class="built_in">window</span>.location.search.substring(<span class="number">1</span>);</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> vars = query.split(<span class="string">&quot;=&quot;</span>);</span></span><br><span class="line"><span class="javascript">			<span class="comment">/*alert(vars[1]);*/</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> content=<span class="built_in">document</span>.getElementById(<span class="string">&quot;user-name&quot;</span>);</span></span><br><span class="line"><span class="javascript">			content.innerText=vars[<span class="number">1</span>];</span></span><br><span class="line"><span class="javascript">			<span class="keyword">return</span>(<span class="literal">false</span>);</span></span><br><span class="line"><span class="javascript">		&#125;;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">		<span class="comment">/*layui的方法*/</span></span></span><br><span class="line"><span class="javascript">		layui.use([<span class="string">&#x27;element&#x27;</span>, <span class="string">&#x27;layer&#x27;</span>, <span class="string">&#x27;util&#x27;</span>], <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> element = layui.element</span></span><br><span class="line"><span class="javascript">					, layer = layui.layer</span></span><br><span class="line"><span class="javascript">					, util = layui.util</span></span><br><span class="line"><span class="javascript">					, $ = layui.$</span></span><br><span class="line"><span class="javascript">					,carousel = layui.carousel; <span class="comment">//轮播</span></span></span><br><span class="line"><span class="javascript">			<span class="comment">//弹出框</span></span></span><br><span class="line"><span class="javascript">			layer.open(&#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">type</span>: <span class="number">1</span></span></span><br><span class="line"><span class="javascript">				, <span class="attr">offset</span>: <span class="string">&#x27;auto&#x27;</span> <span class="comment">//垂直水平居中</span></span></span><br><span class="line"><span class="javascript">				<span class="comment">//,id: &#x27;layerDemo&#x27;+type //防止重复弹出</span></span></span><br><span class="line"><span class="javascript">				, <span class="attr">content</span>: <span class="string">&#x27;&lt;div style=&quot;padding: 20px 100px;&quot;&gt;&#x27;</span> + <span class="string">&#x27;因为没有设置弹性布局，在低分辨率电脑中控件会挤到一块，请放大或缩小画面至文档图14一般大小，&#x27;</span> +</span></span><br><span class="line"><span class="javascript">						<span class="string">&#x27;时间紧任务重，请老师体谅！如没数据请联系我开云端服务&#x27;</span> + <span class="string">&#x27;&lt;/div&gt;&#x27;</span></span></span><br><span class="line"><span class="javascript">				, <span class="attr">btn</span>: <span class="string">&#x27;关闭全部&#x27;</span></span></span><br><span class="line"><span class="javascript">				, <span class="attr">btnAlign</span>: <span class="string">&#x27;c&#x27;</span> <span class="comment">//按钮居中</span></span></span><br><span class="line"><span class="javascript">				, <span class="attr">shade</span>: <span class="number">0</span> <span class="comment">//不显示遮罩</span></span></span><br><span class="line"><span class="javascript">				, <span class="attr">yes</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">					layer.closeAll();</span></span><br><span class="line"><span class="javascript">				&#125;</span></span><br><span class="line"><span class="javascript">			&#125;);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">			<span class="comment">//执行一个轮播实例</span></span></span><br><span class="line"><span class="javascript">			carousel.render(&#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">elem</span>: <span class="string">&#x27;#test1&#x27;</span></span></span><br><span class="line"><span class="javascript">				,<span class="attr">width</span>: <span class="string">&#x27;100%&#x27;</span> <span class="comment">//设置容器宽度</span></span></span><br><span class="line"><span class="javascript">				,<span class="attr">height</span>: <span class="number">400</span></span></span><br><span class="line"><span class="javascript">				,<span class="attr">arrow</span>: <span class="string">&#x27;none&#x27;</span> <span class="comment">//不显示箭头</span></span></span><br><span class="line"><span class="javascript">				,<span class="attr">anim</span>: <span class="string">&#x27;fade&#x27;</span> <span class="comment">//切换动画方式</span></span></span><br><span class="line"><span class="javascript">			&#125;);</span></span><br><span class="line"><span class="javascript">		&#125;);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">		<span class="comment">/*遮阳帘开关*/</span></span></span><br><span class="line"><span class="javascript">		<span class="comment">// 获取元素  开关点击事件</span></span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> light = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.btn&quot;</span>)</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> flag = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">		<span class="comment">// 添加点击事件</span></span></span><br><span class="line"><span class="javascript">		light.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">if</span> (flag == <span class="number">0</span>) &#123;</span></span><br><span class="line"><span class="javascript">				<span class="comment">// 获取body 并且改变 背景颜色</span></span></span><br><span class="line"><span class="javascript">				picStart(pic);</span></span><br><span class="line"><span class="javascript">				<span class="comment">// 重新赋值 flag</span></span></span><br><span class="line"><span class="javascript">				flag = <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">			&#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">				picStart(pic);</span></span><br><span class="line"><span class="javascript">				flag = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">			&#125;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//数组倒序</span></span></span><br><span class="line"><span class="javascript">			pic = pic.reverse();</span></span><br><span class="line"><span class="javascript">		&#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">		<span class="comment">/*开始浇水函数*/</span></span></span><br><span class="line"><span class="javascript">		<span class="comment">// 获取元素  开关点击事件</span></span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> rain_btn = <span class="built_in">document</span>.getElementById(<span class="string">&quot;btn2&quot;</span>);</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> flag1 = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> timer=<span class="literal">null</span>;</span></span><br><span class="line"><span class="javascript">		<span class="comment">// 添加点击事件</span></span></span><br><span class="line"><span class="javascript">		rain_btn.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">if</span> (flag1 == <span class="number">0</span>) &#123;</span></span><br><span class="line"><span class="javascript">				rain();</span></span><br><span class="line"><span class="javascript">				<span class="comment">// 重新赋值 flag</span></span></span><br><span class="line"><span class="javascript">				flag1 = <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">			&#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">				flag1 = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">			&#125;</span></span><br><span class="line"><span class="javascript">		&#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> pic = [<span class="string">&quot;img/g1.png&quot;</span>, <span class="string">&quot;img/g2.png&quot;</span>, <span class="string">&quot;img/g3.png&quot;</span>, <span class="string">&quot;img/g4.png&quot;</span>, <span class="string">&quot;img/g5.png&quot;</span>, <span class="string">&quot;img/g6.png&quot;</span>, <span class="string">&quot;img/g7.png&quot;</span></span></span><br><span class="line"><span class="javascript">			, <span class="string">&quot;img/g8.png&quot;</span>, <span class="string">&quot;img/g9.png&quot;</span>, <span class="string">&quot;img/g10.png&quot;</span>, <span class="string">&quot;img/g11.png&quot;</span>, <span class="string">&quot;img/g12.png&quot;</span>, <span class="string">&quot;img/g13.png&quot;</span>];</span></span><br><span class="line"><span class="javascript">		pic = pic.reverse();  <span class="comment">//第一次数组倒序，因为下面需要，所以就懒得换数组了</span></span></span><br><span class="line"><span class="javascript">		<span class="comment">/*遮阳帘开关函数*/</span></span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">picStart</span>(<span class="params">pic</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> i = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> time = <span class="literal">null</span>;</span></span><br><span class="line"><span class="javascript">			time = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="keyword">if</span> (i != pic.length) &#123;</span></span><br><span class="line"><span class="javascript">					$(<span class="string">&quot;#img&quot;</span>)[<span class="number">0</span>].src = pic[i];</span></span><br><span class="line"><span class="javascript">				&#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">clearInterval</span>(time);</span></span><br><span class="line"><span class="javascript">					i = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">				&#125;</span></span><br><span class="line"><span class="javascript">				i++;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">			&#125;, <span class="number">100</span>);</span></span><br><span class="line"><span class="javascript">		&#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">		<span class="comment">/*大棚浇水系统*/</span></span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">rain</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="keyword">var</span> canvas = $(<span class="string">&#x27;#canvas&#x27;</span>)[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">				<span class="comment">/*			canvas.width = document.getInstanceById(&quot;rain&quot;).innerWidth;</span></span></span><br><span class="line"><span class="comment"><span class="javascript">                            canvas.height = document.getInstanceById(&quot;rain&quot;).innerHeight;*/</span></span></span><br><span class="line"><span class="javascript">				<span class="keyword">if</span> (canvas.getContext) &#123;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">var</span> ctx = canvas.getContext(<span class="string">&#x27;2d&#x27;</span>);</span></span><br><span class="line"><span class="javascript">					<span class="keyword">var</span> w = canvas.width;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">var</span> h = canvas.height;</span></span><br><span class="line"><span class="javascript">					ctx.strokeStyle = <span class="string">&#x27;rgba(174,194,224,0.8)&#x27;</span>;</span></span><br><span class="line"><span class="javascript">					ctx.lineWidth = <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">					ctx.lineCap = <span class="string">&#x27;round&#x27;</span>;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">var</span> init = [];</span></span><br><span class="line"><span class="javascript">					<span class="keyword">var</span> maxParts = <span class="number">1000</span>;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">for</span> (<span class="keyword">var</span> a = <span class="number">0</span>; a &lt; maxParts; a++) &#123;</span></span><br><span class="line"><span class="javascript">						init.push(&#123;</span></span><br><span class="line"><span class="javascript">							<span class="attr">x</span>: <span class="built_in">Math</span>.random() * w,</span></span><br><span class="line"><span class="javascript">							<span class="attr">y</span>: <span class="built_in">Math</span>.random() * h,</span></span><br><span class="line"><span class="javascript">							<span class="attr">l</span>: <span class="built_in">Math</span>.random() * <span class="number">1</span>,</span></span><br><span class="line"><span class="javascript">							<span class="attr">xs</span>: -<span class="number">4</span> + <span class="built_in">Math</span>.random() * <span class="number">4</span> + <span class="number">2</span>,</span></span><br><span class="line"><span class="javascript">							<span class="attr">ys</span>: <span class="built_in">Math</span>.random() * <span class="number">10</span> + <span class="number">10</span></span></span><br><span class="line"><span class="javascript">						&#125;)</span></span><br><span class="line"><span class="javascript">					&#125;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">var</span> particles = [];</span></span><br><span class="line"><span class="javascript">					<span class="keyword">for</span> (<span class="keyword">var</span> b = <span class="number">0</span>; b &lt; maxParts; b++) &#123;</span></span><br><span class="line"><span class="javascript">						particles[b] = init[b];</span></span><br><span class="line"><span class="javascript">					&#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">					<span class="function"><span class="keyword">function</span> <span class="title">draw</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">						ctx.clearRect(<span class="number">0</span>, <span class="number">0</span>, w, h);</span></span><br><span class="line"><span class="javascript">						<span class="keyword">for</span> (<span class="keyword">var</span> c = <span class="number">0</span>; c &lt; particles.length; c++) &#123;</span></span><br><span class="line"><span class="javascript">							<span class="keyword">var</span> p = particles[c];</span></span><br><span class="line"><span class="javascript">							ctx.beginPath();</span></span><br><span class="line"><span class="javascript">							ctx.moveTo(p.x, p.y);</span></span><br><span class="line"><span class="javascript">							ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys);</span></span><br><span class="line"><span class="javascript">							ctx.stroke();</span></span><br><span class="line"><span class="javascript">						&#125;</span></span><br><span class="line"><span class="javascript">						move();</span></span><br><span class="line"><span class="javascript">						<span class="keyword">if</span>(flag1==<span class="number">0</span>)&#123;</span></span><br><span class="line"><span class="javascript">							<span class="built_in">clearInterval</span>(timer);</span></span><br><span class="line"><span class="javascript">							ctx.clearRect(<span class="number">0</span>, <span class="number">0</span>, w, h);</span></span><br><span class="line"><span class="javascript">						&#125;</span></span><br><span class="line"><span class="javascript">					&#125;</span></span><br><span class="line"><span class="javascript">					<span class="function"><span class="keyword">function</span> <span class="title">move</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="keyword">for</span> (<span class="keyword">var</span> b = <span class="number">0</span>; b &lt; particles.length; b++) &#123;</span></span><br><span class="line"><span class="javascript">							<span class="keyword">var</span> p = particles[b];</span></span><br><span class="line"><span class="javascript">							p.x += p.xs;</span></span><br><span class="line"><span class="javascript">							p.y += p.ys;</span></span><br><span class="line"><span class="javascript">							<span class="keyword">if</span> (p.x &gt; w || p.y &gt; h) &#123;</span></span><br><span class="line"><span class="javascript">								p.x = <span class="built_in">Math</span>.random() * w;</span></span><br><span class="line"><span class="javascript">								p.y = -<span class="number">20</span>;</span></span><br><span class="line"><span class="javascript">							&#125;</span></span><br><span class="line"><span class="javascript">						&#125;</span></span><br><span class="line"><span class="javascript">					&#125;</span></span><br><span class="line"><span class="javascript">					timer=<span class="built_in">setInterval</span>(draw, <span class="number">30</span>);</span></span><br><span class="line"><span class="javascript">				&#125;</span></span><br><span class="line"><span class="javascript">			&#125;);</span></span><br><span class="line"><span class="javascript">		&#125;</span></span><br><span class="line"><span class="javascript">	</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="首页样式index-css"><a href="#首页样式index-css" class="headerlink" title="首页样式index.css"></a>首页样式index.css</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="comment">/*background: url(../img/bg.jpg) no-repeat top center ;*/</span></span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#F5F5F5</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.15</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">header</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">../img/head_bg.png</span>) no-repeat;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">header</span> <span class="selector-tag">h1</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">60px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: left;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">8%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">header</span> <span class="selector-class">.time</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">32px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">90%</span>);</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">4.8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.mainbox</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">1080px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto <span class="number">0</span> auto;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">0</span> <span class="number">2px</span>;</span><br><span class="line">  <span class="comment">/*background-color: #92B8B1;*/</span></span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.column</span> &#123;</span><br><span class="line">  <span class="attribute">flex</span>: <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.column</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>) &#123;</span><br><span class="line">  <span class="attribute">flex</span>: <span class="number">5</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">2px</span> <span class="number">6.2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.panel</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">350px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">../img/line.png</span>) <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.04</span>);</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">2.8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.panel</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-left</span>: <span class="number">2px</span> solid <span class="number">#02a6b5</span>;</span><br><span class="line">  <span class="attribute">border-top</span>: <span class="number">2px</span> solid <span class="number">#02a6b5</span>;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.panel</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-right</span>: <span class="number">2px</span> solid <span class="number">#02a6b5</span>;</span><br><span class="line">  <span class="attribute">border-top</span>: <span class="number">2px</span> solid <span class="number">#02a6b5</span>;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.panel</span> <span class="selector-class">.panel_footer</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.panel</span> <span class="selector-class">.panel_footer</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-left</span>: <span class="number">2px</span> solid <span class="number">#02a6b5</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">2px</span> solid <span class="number">#02a6b5</span>;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.panel</span> <span class="selector-class">.panel_footer</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-right</span>: <span class="number">2px</span> solid <span class="number">#02a6b5</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">2px</span> solid <span class="number">#02a6b5</span>;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.bar</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">color</span>: black;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.bar</span> <span class="selector-class">.chart</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">550px</span>;</span><br><span class="line">  <span class="comment">/*background-color: #B5FFF8;*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.barTwo</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">color</span>: black;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.barTwo</span> <span class="selector-class">.chart</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">550px</span>;</span><br><span class="line"> <span class="comment">/* background-color: #B5FFF8;*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.line</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">color</span>: black;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.line</span> <span class="selector-class">.chart</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">550px</span>;</span><br><span class="line"> <span class="comment">/* background-color: #B5FFF8;*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.lineTwo</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">color</span>: black;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.lineTwo</span> <span class="selector-class">.chart</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">550px</span>;</span><br><span class="line">  <span class="comment">/*background-color: #B5FFF8;*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.pie</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">color</span>: black;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.pie</span> <span class="selector-class">.chart</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">550px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#B5FFF8</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.pieTwo</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">color</span>: black;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.pieTwo</span> <span class="selector-class">.chart</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">550px</span>;</span><br><span class="line"> <span class="comment">/* background-color: #B5FFF8;*/</span></span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;../img/dapeng.jpg&quot;</span>) no-repeat;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.no</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">188</span>, <span class="number">189</span>, <span class="number">187</span>, <span class="number">0.1</span>);</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.map</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#ffb94b</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">162px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.map</span> <span class="selector-class">.map1</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">103.6px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">103.6px</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">../img/map.png</span>);</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.map</span> <span class="selector-class">.map2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">128.6px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">128.6px</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">../img/lbx.png</span>);</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.3</span>;</span><br><span class="line">  <span class="attribute">animation</span>: animt1 linear <span class="number">15s</span> infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.map</span> <span class="selector-class">.map3</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">113.2px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">113.2px</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">../img/jt.png</span>);</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.6</span>;</span><br><span class="line">  <span class="attribute">animation</span>: animt2 linear <span class="number">15s</span> infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> animt1 &#123;</span><br><span class="line">  <span class="selector-tag">from</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>) <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">to</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>) <span class="built_in">rotate</span>(<span class="number">360deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> animt2 &#123;</span><br><span class="line">  <span class="selector-tag">from</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>) <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">to</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>) <span class="built_in">rotate</span>(-<span class="number">360deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mainbox</span> <span class="selector-class">.map</span> <span class="selector-class">.chart</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">888</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 约束屏幕尺寸 */</span></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">42px</span> <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">1920px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">80px</span> <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.demo-carousel</span>&#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bg1</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;../img/carousel1.jpg&quot;</span>) no-repeat;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  -webkit-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  -o-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">background-position</span>: center <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bg2</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;../img/carousel2.jpg&quot;</span>) no-repeat;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  -webkit-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  -o-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">background-position</span>: center <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bg3</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;../img/carousel3.jpg&quot;</span>) no-repeat;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  -webkit-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  -o-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">background-position</span>: center <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bg4</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;../img/carousel4.jpg&quot;</span>) no-repeat;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  -webkit-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  -o-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">background-position</span>: center <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bg5</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;../img/carousel5.jpg&quot;</span>) no-repeat;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  -webkit-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  -o-<span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">background-position</span>: center <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*遮阳帘开关等*/</span></span><br><span class="line"><span class="selector-class">.control</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">490px</span>;</span><br><span class="line">  <span class="comment">/*background-color: #01AAED;*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.control</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">color</span>: black;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.control-main</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">445px</span>;</span><br><span class="line">  <span class="comment">/*background-color: #B5FFF8;*/</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">55px</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">120px</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">  appearance: none;</span><br><span class="line">  <span class="attribute">outline</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#05c46b</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: <span class="number">0</span> <span class="number">3px</span> <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">76px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">76px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: <span class="number">0</span> <span class="number">3px</span> gray;</span><br><span class="line">  <span class="attribute">background</span>: white;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease-in-out;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 当btn 被点击触发 */</span></span><br><span class="line"><span class="selector-class">.btn</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: gray;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 当btn 被点击触发 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">72px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*底部注释栏*/</span></span><br><span class="line"><span class="selector-class">.footer</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#9BD1FA</span>;</span><br><span class="line">  <span class="attribute">border-width</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">border-style</span>:  solid;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-color</span>: <span class="number">#000</span> <span class="number">#000</span> <span class="number">#000</span> <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.footer</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0px</span> auto;</span><br><span class="line">  <span class="attribute">text-align</span>:center;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">letter-spacing</span>:<span class="number">3px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="实时温度页realTemp-html"><a href="#实时温度页realTemp-html" class="headerlink" title="实时温度页realTemp.html"></a>实时温度页realTemp.html</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>实时温度数据<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">        <span class="selector-tag">html</span> &#123;</span></span><br><span class="line"><span class="css">            <span class="attribute">height</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">overflow-x</span>:hidden;</span></span><br><span class="line"><span class="css">            <span class="attribute">overflow-y</span>:hidden;</span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css">        <span class="selector-id">#nowtime</span> &#123;</span></span><br><span class="line"><span class="css">            <span class="attribute">display</span>: block;</span></span><br><span class="line"><span class="css">            <span class="attribute">color</span>: black;</span></span><br><span class="line"><span class="css">            <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">            <span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>  <span class="attr">style</span>=<span class="string">&quot;height: 100%; margin: 0&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span> <span class="attr">id</span>=<span class="string">&quot;nowtime&quot;</span>&gt;</span>实时温度时间<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> dom = <span class="built_in">document</span>.getElementById(<span class="string">&quot;container&quot;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> myChart = echarts.init(dom);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = &#123;&#125;;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> option;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> TempData =<span class="string">&quot;&quot;</span>;</span></span><br><span class="line"><span class="javascript">    <span class="comment">//连接webSocket获取实时温湿度数据</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (<span class="built_in">window</span>.WebSocket) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> ws = <span class="keyword">new</span> WebSocket(<span class="string">&#x27;ws://39.98.198.224:888&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        ws.onopen = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&quot;连接服务器成功&quot;</span>);</span></span><br><span class="line"><span class="javascript">            ws.send(<span class="string">&quot; &quot;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        ws.onmessage = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            TempData=e.data;</span></span><br><span class="line"><span class="javascript">            TempData=TempData.split(<span class="string">&quot; &quot;</span>);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        ws.onclose = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&quot;服务器关闭&quot;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        ws.onerror = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&quot;连接出错&quot;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">//设置图表</span></span></span><br><span class="line"><span class="javascript">    option = &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">series</span>: [&#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">type</span>: <span class="string">&#x27;gauge&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">center</span>: [<span class="string">&quot;50%&quot;</span>, <span class="string">&quot;60%&quot;</span>],</span></span><br><span class="line"><span class="javascript">            <span class="attr">startAngle</span>: <span class="number">200</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">endAngle</span>: -<span class="number">20</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">min</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">max</span>: <span class="number">60</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">splitNumber</span>: <span class="number">12</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">color</span>: <span class="string">&#x27;#FFAB91&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">progress</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">width</span>: <span class="number">30</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">            <span class="attr">pointer</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">show</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">axisLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">width</span>: <span class="number">30</span></span></span><br><span class="line"><span class="javascript">                &#125;</span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">axisTick</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">distance</span>: -<span class="number">45</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">splitNumber</span>: <span class="number">5</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">width</span>: <span class="number">2</span>,</span></span><br><span class="line"><span class="javascript">                    <span class="attr">color</span>: <span class="string">&#x27;#999&#x27;</span></span></span><br><span class="line"><span class="javascript">                &#125;</span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">splitLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">distance</span>: -<span class="number">52</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">length</span>: <span class="number">14</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">width</span>: <span class="number">3</span>,</span></span><br><span class="line"><span class="javascript">                    <span class="attr">color</span>: <span class="string">&#x27;#999&#x27;</span></span></span><br><span class="line"><span class="javascript">                &#125;</span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">axisLabel</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">distance</span>: -<span class="number">20</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">color</span>: <span class="string">&#x27;#999&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">fontSize</span>: <span class="number">20</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">anchor</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">title</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">detail</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">valueAnimation</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">width</span>: <span class="string">&#x27;60%&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">lineHeight</span>: <span class="number">40</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">height</span>: <span class="string">&#x27;15%&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">borderRadius</span>: <span class="number">8</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">offsetCenter</span>: [<span class="number">0</span>, <span class="string">&#x27;-15%&#x27;</span>],</span></span><br><span class="line"><span class="javascript">                <span class="attr">fontSize</span>: <span class="number">50</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">fontWeight</span>: <span class="string">&#x27;bolder&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">formatter</span>: <span class="string">&#x27;&#123;value&#125; °C&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">color</span>: <span class="string">&#x27;auto&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">data</span>: [&#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">value</span>: <span class="number">0</span></span></span><br><span class="line"><span class="javascript">            &#125;]</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">            &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">type</span>: <span class="string">&#x27;gauge&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">center</span>: [<span class="string">&quot;50%&quot;</span>, <span class="string">&quot;60%&quot;</span>],</span></span><br><span class="line"><span class="javascript">                <span class="attr">startAngle</span>: <span class="number">200</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">endAngle</span>: -<span class="number">20</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">min</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">max</span>: <span class="number">60</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">color</span>: <span class="string">&#x27;#FD7347&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                &#125;,</span></span><br><span class="line"><span class="javascript">                <span class="attr">progress</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">                    <span class="attr">width</span>: <span class="number">8</span></span></span><br><span class="line"><span class="javascript">                &#125;,</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">                <span class="attr">pointer</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">                &#125;,</span></span><br><span class="line"><span class="javascript">                <span class="attr">axisLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">                &#125;,</span></span><br><span class="line"><span class="javascript">                <span class="attr">axisTick</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">                &#125;,</span></span><br><span class="line"><span class="javascript">                <span class="attr">splitLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">                &#125;,</span></span><br><span class="line"><span class="javascript">                <span class="attr">axisLabel</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">                &#125;,</span></span><br><span class="line"><span class="javascript">                <span class="attr">detail</span>: &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">                &#125;,</span></span><br><span class="line"><span class="javascript">                <span class="attr">data</span>: [&#123;</span></span><br><span class="line"><span class="javascript">                    <span class="attr">value</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">                &#125;]</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        ],</span></span><br><span class="line"><span class="javascript">    &#125;;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">let</span> random = TempData[<span class="number">2</span>];</span></span><br><span class="line"><span class="javascript">        option.series[<span class="number">0</span>].data[<span class="number">0</span>].value = random;</span></span><br><span class="line"><span class="javascript">        option.series[<span class="number">1</span>].data[<span class="number">0</span>].value = random;</span></span><br><span class="line"><span class="javascript">        myChart.setOption(option, <span class="literal">true</span>);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.getElementById(<span class="string">&#x27;nowtime&#x27;</span>).innerText=(TempData[<span class="number">0</span>]+<span class="string">&quot; &quot;</span>+TempData[<span class="number">1</span>]);</span></span><br><span class="line"><span class="javascript">    &#125;,<span class="number">1600</span>);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (option &amp;&amp; <span class="keyword">typeof</span> option === <span class="string">&#x27;object&#x27;</span>) &#123;</span></span><br><span class="line"><span class="javascript">        myChart.setOption(option);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="实时湿度realHumidity-html"><a href="#实时湿度realHumidity-html" class="headerlink" title="实时湿度realHumidity.html"></a>实时湿度realHumidity.html</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span> <span class="attr">style</span>=<span class="string">&quot;overflow:hidden;&quot;</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>实时空气湿度<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">        <span class="selector-id">#container</span> &#123;</span></span><br><span class="line"><span class="css">            <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">height</span>: <span class="number">280px</span>;</span></span><br><span class="line"><span class="css">           <span class="comment">/* margin: 0px auto;*/</span></span></span><br><span class="line"><span class="css">            <span class="attribute">margin-left</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css">        <span class="selector-id">#nowtime</span> &#123;</span></span><br><span class="line"><span class="css">            <span class="attribute">color</span>: black;</span></span><br><span class="line"><span class="css">            <span class="attribute">display</span>: block;</span></span><br><span class="line"><span class="css">            <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">            <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">            <span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>  <span class="attr">style</span>=<span class="string">&quot;height: 100%; margin: 0&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span> <span class="attr">id</span>=<span class="string">&quot;nowtime&quot;</span>&gt;</span>实时温度时间<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container&quot;</span> &gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> dom = <span class="built_in">document</span>.getElementById(<span class="string">&quot;container&quot;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> myChart = echarts.init(dom);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = &#123;&#125;;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> option;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> HumiData=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">//连接webSocket获取实时温湿度数据</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (<span class="built_in">window</span>.WebSocket) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> ws = <span class="keyword">new</span> WebSocket(<span class="string">&#x27;ws://39.98.198.224:888&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        ws.onopen = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&quot;连接服务器成功&quot;</span>);</span></span><br><span class="line"><span class="javascript">            ws.send(<span class="string">&quot; &quot;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        ws.onmessage = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            HumiData=e.data;</span></span><br><span class="line"><span class="javascript">            HumiData=HumiData.split(<span class="string">&quot; &quot;</span>);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        ws.onclose = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&quot;服务器关闭&quot;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        ws.onerror = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&quot;连接出错&quot;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">//设置图表</span></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> symbols = [</span></span><br><span class="line"><span class="javascript">        <span class="string">&#x27;path://M36.7,102.84c-1.17,2.54-2.99,4.98-3.39,7.63c-1.51,9.89-3.31,19.58-1.93,29.95 c0.95,7.15-2.91,14.82-3.57,22.35c-0.64,7.36-0.2,14.86,0.35,22.25c0.12,1.68,2.66,3.17,4.67,5.4c-0.6,0.82-1.5,2.22-2.58,3.48 c-0.96,1.12-1.96,2.35-3.21,3.04c-1.71,0.95-3.71,2.03-5.51,1.9c-1.18-0.08-3.04-2.13-3.16-3.43c-0.44-4.72,0-9.52-0.41-14.25 c-0.94-10.88-2.32-21.72-3.24-32.61c-0.49-5.84-1.63-12.01-0.35-17.54c3.39-14.56,2.8-28.84,0.36-43.4 c-2.71-16.16-1.06-32.4,0.54-48.59c0.91-9.22,4.62-17.36,8.53-25.57c1.32-2.77,1.88-6.84,0.87-9.62C21.89-3.77,18.09-11,14.7-18.38 c-0.56,0.1-1.13,0.21-1.69,0.31C10.17-11.52,6.29-5.2,4.71,1.65C2.05,13.21-4.42,22.3-11.43,31.28c-1.32,1.69-2.51,3.5-3.98,5.04 c-4.85,5.08-3.25,10.98-2.32,16.82c0.25,1.53,0.52,3.06,0.77,4.59c-0.53,0.22-1.07,0.43-1.6,0.65c-1.07-2.09-2.14-4.19-3.28-6.44 c-6.39,2.91-2.67,9.6-5.23,15.16c-1.61-3.31-2.77-5.68-3.93-8.06c0-0.33,0-0.67,0-1c6.96-16.08,14.63-31.9,20.68-48.31 C-5.24-4.07-2.03-18.55,2-32.73c0.36-1.27,0.75-2.53,0.98-3.82c1.36-7.75,4.19-10.23,11.88-10.38c1.76-0.04,3.52-0.21,5.76-0.35 c-0.55-3.95-1.21-7.3-1.45-10.68c-0.61-8.67,0.77-16.69,7.39-23.19c2.18-2.14,4.27-4.82,5.25-7.65c2.39-6.88,11.66-9,16.94-8.12 c5.92,0.99,12.15,7.93,12.16,14.12c0.01,9.89-5.19,17.26-12.24,23.68c-2.17,1.97-5.35,4.77-5.17,6.94c0.31,3.78,4.15,5.66,8.08,6.04 c1.82,0.18,3.7,0.37,5.49,0.1c5.62-0.85,8.8,2.17,10.85,6.73C73.38-27.19,78.46-14.9,84.2-2.91c1.52,3.17,4.52,5.91,7.41,8.09 c7.64,5.77,15.57,11.16,23.45,16.61c2.28,1.58,4.64,3.23,7.21,4.14c5.18,1.84,8.09,5.63,9.82,10.46c0.45,1.24,0.19,3.71-0.6,4.18 c-1.06,0.63-3.15,0.27-4.44-0.38c-7.05-3.54-12.84-8.88-19.14-13.5c-3.5-2.57-7.9-4-12.03-5.6c-9.44-3.66-17.73-8.42-22.5-18.09 c-2.43-4.94-6.09-9.27-9.69-14.61c-1.2,10.98-4.46,20.65,1.14,31.19c6.62,12.47,5.89,26.25,1.21,39.49 c-2.52,7.11-6.5,13.74-8.67,20.94c-1.91,6.33-2.2,13.15-3.23,19.75c-0.72,4.63-0.84,9.48-2.36,13.84 c-2.49,7.16-6.67,13.83-5.84,21.82c0.42,4.02,1.29,7.99,2.1,12.8c-3.74-0.49-7.47-0.4-10.67-1.66c-1.33-0.53-2.43-4.11-2.07-6.01 c1.86-9.94,3.89-19.69,0.07-29.74C34.55,108.63,36.19,105.52,36.7,102.84c1.25-8.45,2.51-16.89,3.71-24.9 c-0.83-0.58-0.85-0.59-0.87-0.61c-0.03,0.16-0.07,0.32-0.09,0.48C38.53,86.15,37.62,94.5,36.7,102.84z&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="comment">//&#x27;path://M40.02-99c2.07,1.21,4.26,2.25,6.19,3.66c5.94,4.34,8.23,12.57,4.95,19.79 c-3.21,7.08-6.82,14.03-10.86,20.67c-2.17,3.56-1.25,5.38,1.99,6.36c2.94,0.89,6.36,1.91,9.15,1.21c5.51-1.4,8.33,1.23,10.66,5.29 c4.71,8.22,9.72,16.29,13.84,24.8C81.06-6.65,89,0.4,99.56,5.17C109.82,9.8,120,14.7,129.85,20.15c4.72,2.61,9.09,6.37,10.24,12.97 c-2.89-1.93-5.2-3.75-7.78-5.04c-0.99-0.5-2.6,0.22-4.83,0.5c-5.36-9.35-16.8-9.4-26.74-12.62C91.68,13.04,81.82,11.37,75.66,3 c-5.98-8.13-11.61-16.52-17.4-24.79c-0.46-0.66-0.98-1.27-1.66-2.16c-3.21,7.75-6.78,15-9.12,22.63c-1.15,3.76-0.64,8.37,0.26,12.33 c0.81,3.59,3.01,6.92,4.87,10.22c6.73,11.95,2.41,22.89-2.91,33.75c-0.35,0.72-0.86,1.43-1.46,1.97 c-7.11,6.38-14.48,12.5-21.24,19.22c-2.08,2.07-3.1,5.7-3.62,8.77c-1.92,11.44-3.81,22.92-4.93,34.46 c-0.5,5.16,1.06,10.49,1.28,15.75c0.23,5.7,0.39,11.47-0.15,17.13c-1.15,12.11-2.83,24.17-4.11,36.27c-0.18,1.72,0.8,3.53,1.13,5.33 c0.88,4.76-0.22,6.23-4.71,5.17c-4.53-1.06-8.86-2.94-14.27-4.8c1.98-1.62,2.84-2.83,3.94-3.12c5.42-1.44,7-5.2,6.39-10.23 c-1.39-11.39-3.15-22.73-4.24-34.14c-0.53-5.56,0.16-11.23,0.24-16.85c0.06-4.49,0.01-8.97,0.01-14.72 c-2.79,1.53-5.2,2.27-6.79,3.83c-4.26,4.19-8.39,8.56-12.11,13.22c-1.55,1.95-2.19,4.76-2.79,7.29c-0.47,1.99,0.6,5.02-0.48,6.05 c-2.17,2.08-5.2,3.79-8.13,4.38c-3.61,0.73-7.49,0.18-12.26,0.18c6.34-8.69,11.91-16.11,17.22-23.71c3.29-4.71,6.23-9.67,9.24-14.58 c2.15-3.5,3.76-7.4,6.3-10.57c5.38-6.73,6.74-14.28,6.72-22.64C0.88,68.3,1.36,57.91,2.26,47.58c0.69-7.85,2.15-15.67,3.7-23.41 c0.77-3.83,2.89-7.39,3.72-11.22c1.83-8.4-1.9-16-4.38-23.95C2.96-5.34-0.31,0.12-1.5,6c-1.96,9.72-7.34,17.44-12.26,25.57 c-4.39,7.25-8.79,14.52-12.75,22.01c-2.64,5-4.5,10.41-6.83,15.92c-4.82-5.28-4.65-10.59-0.94-16.97 C-21.4,30.4-12.08,6.78-6.17-18.12c1.4-5.88,1.24-12.11,2.23-18.12c1.2-7.27,4.15-9.56,11.39-9.69c8.65-0.14,13.86-4.77,14.48-13.51 c0.35-5.01,0.16-10.11-0.28-15.12c-0.82-9.3,2.49-16.57,10.17-21.69c2.08-1.39,4.78-1.87,7.2-2.76C39.35-99,39.69-99,40.02-99z&#x27;,</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//&#x27;path://M-39,33.03c3.72-9.74,12.97-12.87,20.96-17.43c9.51-5.43,19.2-10.54,28.69-16 c1.77-1.02,3.35-2.85,4.33-4.67C21.44-17,27.82-28.95,33.95-41.04c2.13-4.2,4.95-6.01,9.7-6.09c3.68-0.06,7.52-0.92,10.97-2.25 c5.09-1.95,4.85-5.2,1.1-9.01c-5.12-5.21-10.89-10.1-13.23-17.54c-1.71-5.44,0.78-15.62,4.87-18.74 c4.12-3.15,12.55-3.84,16.69-0.12c3.39,3.04,6.44,7.27,7.8,11.56c1.96,6.16,3.31,12.9,2.99,19.29 c-0.45,9.21,6.35,16.71,15.73,16.97c7.94,0.21,9.27,0.78,10.69,8.61c5.23,28.73,19.4,53.73,32.21,79.33 c1.95,3.9,4.32,7.71,5.51,11.84c1.03,3.61,0.66,7.61,0.91,11.45c-0.73,0.14-1.45,0.28-2.18,0.42c-0.49-1.57-0.98-3.15-1.47-4.72 c-0.22,0.09-0.44,0.19-0.66,0.28c-0.85-2.62-1.7-5.24-2.74-8.45c-0.9,2.53-1.55,4.4-2.21,6.26c-0.41-0.03-0.83-0.06-1.24-0.08 c-0.19-2.78-0.35-5.56-0.56-8.34c-0.67-9.04-7.05-14.8-12.04-21.47c-5.2-6.95-10.31-14.09-14.36-21.73 c-3.56-6.7-5.59-14.21-9-21.29c-3.02,9.7-8.69,18.66-6.3,29.2c0.63,2.78,2.68,5.21,3.87,7.9c4.73,10.64,5.56,22.14,6.92,33.46 c1.21,10.13,1.88,20.38,1.96,30.59c0.06,7.02-1.67,14.04-1.85,21.08c-0.12,4.66,0.83,9.41,1.73,14.03 c1.21,6.22,2.81,12.36,4.28,18.52c0.3,1.26,0.69,2.51,1.23,3.69c3.92,8.54,7.79,17.1,11.88,25.55c1.3,2.67,3.24,5.04,5.07,7.83 c-2.19,0.86-3.64,1.76-5.17,1.97c-3.53,0.47-6.9,0.64-8.13-4.11c-1.71-6.58-3.78-13.07-5.87-19.54c-0.44-1.35-1.6-2.47-3.21-3.33 c0,16.17-7.35,32.86,6.17,48.11c-3.55,0-5.95,0.01-8.36,0c-7.59-0.03-7.66-0.54-7.72-7.64c-0.11-13.74-0.69-27.4-5.27-40.71 c-1.72-5.01-0.38-11.01-1.01-16.49c-0.67-5.79-2.11-11.48-3.08-17.24c-2.52-14.91-12.01-26.06-20.01-38.12 c-5.34-8.06-10.18-16.56-14.25-25.32c-5.18-11.16-5.52-22.61,1.24-33.57c3.68-5.96,3.12-12.27,1.17-18.55 c-2.5-8.03-5.22-16-8.05-24.61c-0.91,1.44-1.76,2.86-2.68,4.24C32.9-10.29,28.04-2.46,22.63,4.96c-5.34,7.34-14.22,8.45-22.08,10.9 c-8.48,2.65-17.2,4.46-23.03,12.01c-1.84,2.39-3.61,4.84-5.41,7.26c-0.39-0.17-0.78-0.34-1.16-0.51c0.81-2.38,1.62-4.76,2.43-7.14 c-0.2-0.22-0.39-0.44-0.59-0.66c-1.24,1.3-2.31,2.88-3.77,3.83c-2.54,1.66-5.33,2.94-8.02,4.37C-39,34.36-39,33.7-39,33.03z&#x27;,</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//&#x27;path://M80,100.49c0,5.23,0.13,10.46-0.03,15.69c-0.2,6.3-0.57,12.6-0.99,18.9 c-0.94,14.08-2.08,28.14-2.87,42.22c-0.41,7.29,4.95,14.31,12.03,16.62c1.22,0.4,2.43,0.84,3.65,2.16c-1.8,0.35-3.59,0.91-5.4,1 c-5.4,0.3-10.83,0.7-16.22,0.42c-1.44-0.07-3.7-2.25-3.95-3.74c-0.56-3.4,0.14-6.98-0.13-10.45c-0.77-9.67-0.8-19.56-3-28.92 c-1.97-8.39-2.18-16.07-0.02-24.35c1.28-4.91,1.34-10.48,0.5-15.52c-2.09-12.71-4.95-25.31-7.65-37.92 c-0.34-1.57-1.3-3.33-2.52-4.33c-3.71-3.01-7.37-6.38-11.62-8.38c-13.61-6.41-19.23-28.93-9.14-42.66 c5.41-7.36,5.32-13.85,0.74-21.4c-4.33-7.14-7.8-14.79-11.71-22.32C16.35-14.03,11.08-4.82,4.94,3.76 C1.8,8.13-2.43,12.19-7.04,14.93c-5.3,3.15-11.39,5.39-17.43,6.76c-9.05,2.05-14.31,7.59-17.67,15.68 c-0.43,1.05-1.13,1.99-1.76,2.95c-0.15,0.22-0.52,0.29-1.8,0.94c0.32-2.2,0.61-3.74,0.74-5.3c0.09-1.14-0.04-2.3-0.07-3.46 c-1.38,0.26-3.21,0.05-4.06,0.86c-2,1.91-3.5,4.33-5.27,6.49c-0.5,0.61-1.22,1.03-1.95,1.61c-1.02-5.19,1.42-10.27,7.11-13.9 C-36.09,19.24-22.82,11.2-9.77,2.82c2.12-1.36,3.99-3.6,5.17-5.85C1.52-14.72,7.44-26.52,13.29-38.35 c2.21-4.48,5.11-7.27,10.48-7.83c3.23-0.34,6.27-2.47,9.89-4.01c-4.23-4.83-8.31-8.74-11.49-13.28c-6.34-9.03-7.03-22.38,3.14-29.92 c6.9-5.12,13.79-4.47,20.85,0.69c6.15,4.5,6.15,11.2,7.55,17.13c1.32,5.6,0.82,11.84,0.1,17.67c-0.73,5.9-0.29,7.53,5.3,8.73 c0.96,0.21,1.99,0.17,2.98,0.19C72.51-48.76,74.44-47.06,76-36.52c1.83,12.35,2.1,25.03,6.99,36.77 c3.28,7.88,6.57,15.79,10.47,23.38c3.66,7.12,8.05,13.87,12.25,20.7c2.97,4.84,3.11,12.13-0.65,17c-1.8-2.05-3.45-3.92-5.01-5.7 c0.04-0.04-0.45,0.53-1.46,1.71C94.83,37.86,80.48,24.72,71.82,8.18c0.46,3.43,0.09,7.26,1.54,10.2c3.95,8.01,1.92,16.67,3.56,24.91 c1.63,8.22,1.87,16.74,3.79,24.88c0.88,3.73,4.32,6.84,6.58,10.25c1.09,1.65,2.2,3.29,3.17,5.01c4.84,8.58,9.09,17.55,14.58,25.69 c7.27,10.79,15.21,21.16,23.39,31.28c6.19,7.67,13.08,14.8,19.92,21.92c2.93,3.04,6.54,5.42,9.96,8.2 c-6.92,4.09-12.67,3.33-19.87-2.17c-1.82-1.39-3.76-2.79-5.87-3.62c-4.12-1.63-4.47-4.54-3.73-8.3c0.26-1.33,0.17-3.42-0.66-4.18 c-7.53-6.87-14.85-14.07-23.04-20.07c-7.75-5.68-12.26-13.2-16.11-21.54c-1.44-3.12-3.31-6.06-5.14-8.98 c-0.5-0.8-1.57-1.24-2.38-1.85C81.01,100.03,80.5,100.26,80,100.49z&#x27;,</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//&#x27;path://M-57,41.03c3.65-4.15,7.17-8.43,10.98-12.42c6.53-6.83,13.31-13.41,19.84-20.23 c1.76-1.84,3.51-3.98,4.4-6.31c3.8-9.99,6.99-20.23,10.99-30.14c2.74-6.79,5.65-13.62,12.37-17.95c4.17-2.68,5.12-7.31,4.29-11.96 c-0.3-1.67-2.02-3.08-3.35-4.97c-2.57,5.59-4.62,10.03-7.21,15.66c-4.79-6.43-9.76-10.83-11.68-16.31 c-1.77-5.04-1.18-11.44,0.04-16.86c1.27-5.62,5.24-9.71,12.03-9.7c1.55,0,3.1-1.68,4.66-2.55c9.3-5.22,20.47-1.53,25.73,7.59 c4.06,7.04,4.84,14.6,5.57,22.26c0.65,6.82-0.32,7.59-8.26,8.11c0,1.97,0,3.96,0,5.95c8.01-0.17,8.01,0.43,12.02,7.52 c2.09,3.69,6.34,6.1,9.41,9.29c2.48,2.58,7.04,3.14,7.24,8c0.29,6.79,0.46,6.78-6.43,11.08c0,15.78-0.02,31.49,0.03,47.2 c0,1.23,0.29,2.51,0.71,3.67c1.64,4.59,3.27,9.19,5.13,13.7c0.79,1.92,1.88,3.83,3.26,5.36c7.54,8.36,15.45,16.41,22.75,24.96 c5.09,5.97,9.05,12.9,14.18,18.84c9.73,11.26,19.47,22.59,30.08,33c8.84,8.67,18.88,16.13,28.51,23.98 c2.52,2.06,5.48,3.58,8.27,5.36c-4.02,3.54-10.94,4.01-16.34,1.62c-4.76-2.11-9.63-4.03-14.6-5.56c-5.6-1.72-6.59-3.72-4.42-9.32 c0.47-1.22-0.12-3.8-1.11-4.5c-7.36-5.15-14.66-10.53-22.55-14.78c-8.49-4.57-15.35-10.3-19.59-19.04 c-4.29-8.84-11.6-14.85-19.48-20.29c-3.2-2.21-6.43-4.4-9.64-6.6c-0.53,0.17-1.05,0.33-1.58,0.5c-0.11,11.17,0.12,22.36-0.45,33.51 c-0.29,5.72-2.33,11.33-3,17.05c-1.68,14.31-3.04,28.65-4.51,42.98c-0.34,3.34,0.94,5.76,4.12,7.18c6.09,2.73,12.14,5.56,18.61,9.26 c-3.96,0.36-7.93,0.72-11.89,1.08c-4.92,0.45-9.91,0.53-14.76,1.42c-6.96,1.28-9.68-0.99-8.69-8.02c1.73-12.28,0.67-24.36-1.4-36.56 c-1.08-6.36-2.02-14.02,0.49-19.47c5.62-12.19,2.4-23.48,0.01-35.2c-2.05-10.04-3.8-20.14-5.9-30.17c-0.32-1.52-1.72-2.91-2.87-4.13 c-3.6-3.83-8.03-7.09-10.85-11.41c-6.61-10.14-2.6-19.6,3.74-28.13c5.27-7.1,6.85-14.1,2.15-21.95c-3.79-6.34-7.53-12.7-11.38-19 c-0.46-0.75-1.41-1.2-2.77-2.3c-3.27,7.28-6.98,13.9-9.24,20.98c-3.58,11.2-12.11,17.05-21.53,22.3c-1.86,1.04-3.57,2.44-5.53,3.21 c-4.29,1.67-6.09,3.88-4.9,9.01c0.69,2.96-1.31,6.55-2.1,9.86c-0.5,0.03-0.99,0.06-1.49,0.08c-0.18-2.57-0.36-5.14-0.66-9.41 c-3.45,4.38-6.11,7.75-9.33,11.84c-1.07-2.08-1.61-3.13-2.15-4.18C-57,43.7-57,42.36-57,41.03z&#x27;</span></span></span><br><span class="line"><span class="javascript">    ];</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> bodyMax = <span class="number">100</span>;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> labelSetting = &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">position</span>: <span class="string">&#x27;outside&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">offset</span>: [<span class="number">0</span>, -<span class="number">20</span>],</span></span><br><span class="line"><span class="javascript">        <span class="attr">formatter</span>: <span class="function"><span class="keyword">function</span> (<span class="params">param</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> (param.value / bodyMax * <span class="number">100</span>).toFixed(<span class="number">0</span>) + <span class="string">&#x27;%&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">textStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">fontSize</span>: <span class="number">18</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">fontFamily</span>: <span class="string">&#x27;Arial&#x27;</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> markLineSetting = &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">symbol</span>: <span class="string">&#x27;none&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">opacity</span>: <span class="number">0.3</span></span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">    &#125;;</span></span><br><span class="line"><span class="javascript">    option = &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">tooltip</span>: &#123;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">legend</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">data</span>: [<span class="string">&#x27;typeB&#x27;</span>],</span></span><br><span class="line"><span class="javascript">            <span class="attr">selectedMode</span>: <span class="string">&#x27;single&#x27;</span></span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">xAxis</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">data</span>:<span class="string">&#x27;n&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">axisTick</span>: &#123;<span class="attr">show</span>: <span class="literal">true</span>&#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">axisLine</span>: &#123;<span class="attr">show</span>: <span class="literal">true</span>&#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">axisLabel</span>: &#123;<span class="attr">show</span>: <span class="literal">true</span>&#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">yAxis</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">max</span>: bodyMax,</span></span><br><span class="line"><span class="javascript">            <span class="attr">offset</span>: <span class="number">20</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">splitLine</span>: &#123;<span class="attr">show</span>: <span class="literal">false</span>&#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">grid</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">top</span>: <span class="string">&#x27;center&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">height</span>: <span class="number">190</span></span></span><br><span class="line"><span class="javascript">            ,<span class="attr">width</span>: <span class="number">263</span></span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">markLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">z</span>: -<span class="number">100</span></span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">        <span class="attr">series</span>: [&#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">name</span>: <span class="string">&#x27;空气湿度&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">type</span>: <span class="string">&#x27;pictorialBar&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">symbolClip</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">symbolBoundingData</span>: bodyMax,</span></span><br><span class="line"><span class="javascript">            <span class="attr">label</span>: labelSetting,</span></span><br><span class="line"><span class="javascript">            <span class="attr">data</span>: [&#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">value</span>:<span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">symbol</span>: symbols[<span class="number">0</span>]</span></span><br><span class="line"><span class="javascript">            &#125;],</span></span><br><span class="line"><span class="javascript">            <span class="attr">markLine</span>: markLineSetting,</span></span><br><span class="line"><span class="javascript">            <span class="attr">z</span>: <span class="number">10</span></span></span><br><span class="line"><span class="javascript">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">name</span>: <span class="string">&#x27;full&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">type</span>: <span class="string">&#x27;pictorialBar&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">symbolBoundingData</span>: bodyMax,</span></span><br><span class="line"><span class="javascript">            <span class="attr">animationDuration</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">color</span>: <span class="string">&#x27;#ccc&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="attr">data</span>: [&#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">value</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">symbol</span>: symbols[<span class="number">0</span>]</span></span><br><span class="line"><span class="javascript">            &#125;]</span></span><br><span class="line"><span class="javascript">        &#125;]</span></span><br><span class="line"><span class="javascript">    &#125;;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">let</span> random = HumiData[<span class="number">3</span>];</span></span><br><span class="line"><span class="javascript">        option.series[<span class="number">0</span>].data[<span class="number">0</span>].value = random;</span></span><br><span class="line"><span class="javascript">        option.series[<span class="number">1</span>].data[<span class="number">0</span>].value = random;</span></span><br><span class="line"><span class="javascript">        myChart.setOption(option, <span class="literal">true</span>);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.getElementById(<span class="string">&#x27;nowtime&#x27;</span>).innerText=(HumiData[<span class="number">0</span>]+<span class="string">&quot; &quot;</span>+HumiData[<span class="number">1</span>]);</span></span><br><span class="line"><span class="javascript">    &#125;,<span class="number">1600</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (option &amp;&amp; <span class="keyword">typeof</span> option === <span class="string">&#x27;object&#x27;</span>) &#123;</span></span><br><span class="line"><span class="javascript">        myChart.setOption(option);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<a class="btn-beautify button--animated larger" href="https://xiaoziyanxiaoludan.gitee.io/xiaoziyan/2021/08/03/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E9%A9%B1%E5%8A%A8%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/" 
  title="智慧农业驱动程序开发"><i class="far fa-hand-point-left"></i><span>智慧农业驱动程序开发</span></a>



<a class="btn-beautify button--animated larger" href="https://xiaoziyanxiaoludan.gitee.io/xiaoziyan/2021/08/06/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E5%A4%A7%E6%95%B0%E6%8D%AE%E8%AE%BE%E8%AE%A1/" 
  title="智慧农业大数据设计"><i class="far fa-hand-point-right"></i><span>智慧农业大数据设计</span></a>

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">XiaoZiYan</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a target="_blank" rel="noopener" href="https://baidu.como">https://baidu.como</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://xiaoziyanxiaoludan.gitee.io/xiaoziyan" target="_blank">XiaoZiYan</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/xiaoziyan/tags/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/">智慧农业</a><a class="post-meta__tags" href="/xiaoziyan/tags/PCB/">PCB</a><a class="post-meta__tags" href="/xiaoziyan/tags/%E5%89%8D%E7%AB%AF/">前端</a></div><div class="post_share"><div class="social-share" data-image="http://xiaoziyan.top/images/e610f1279851b9e6e3f4c338cfede87f.jpeg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/xiaoziyan/2021/08/06/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E5%A4%A7%E6%95%B0%E6%8D%AE%E8%AE%BE%E8%AE%A1/"><img class="prev-cover" src="http://xiaoziyan.top/images/3205a9c3fa4e72ebd71a6101d2812929.jpeg" onerror="onerror=null;src='/xiaoziyan/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">智慧农业——大数据后台展示设计</div></div></a></div><div class="next-post pull-right"><a href="/xiaoziyan/2021/08/03/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E9%A9%B1%E5%8A%A8%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/"><img class="next-cover" src="http://xiaoziyan.top/images/a7944f919383883f23a8b3f45788ae9c.jpeg" onerror="onerror=null;src='/xiaoziyan/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">智慧农业——驱动程序设计</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/xiaoziyan/2021/08/06/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E5%A4%A7%E6%95%B0%E6%8D%AE%E8%AE%BE%E8%AE%A1/" title="智慧农业——大数据后台展示设计"><img class="cover" src="http://xiaoziyan.top/images/3205a9c3fa4e72ebd71a6101d2812929.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-06</div><div class="title">智慧农业——大数据后台展示设计</div></div></a></div><div><a href="/xiaoziyan/2021/08/02/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E7%A1%AC%E4%BB%B6%E8%AE%BE%E8%AE%A1/" title="智慧农业——硬件设计"><img class="cover" src="http://xiaoziyan.top/images/69f7d86180b45b7eabeb284a540905af.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-02</div><div class="title">智慧农业——硬件设计</div></div></a></div><div><a href="/xiaoziyan/2021/08/03/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A%E9%A9%B1%E5%8A%A8%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/" title="智慧农业——驱动程序设计"><img class="cover" src="http://xiaoziyan.top/images/a7944f919383883f23a8b3f45788ae9c.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-03</div><div class="title">智慧农业——驱动程序设计</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%89%E9%A2%98%E7%9A%84%E8%83%8C%E6%99%AF%E5%8F%8A%E6%84%8F%E4%B9%89"><span class="toc-number">1.</span> <span class="toc-text">选题的背景及意义</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E6%8A%80%E6%9C%AF%E5%8F%8A%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E8%AF%B4%E6%98%8E"><span class="toc-number">1.1.</span> <span class="toc-text">实现技术及项目运行环境说明</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%A1%AC%E4%BB%B6%EF%BC%9A"><span class="toc-number">1.1.1.</span> <span class="toc-text">硬件：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%BD%AF%E4%BB%B6%E7%8E%AF%E5%A2%83%EF%BC%9A"><span class="toc-number">1.1.2.</span> <span class="toc-text">软件环境：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%A1%86%E6%9E%B6%EF%BC%9A"><span class="toc-number">1.1.3.</span> <span class="toc-text">使用框架：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90"><span class="toc-number">1.2.</span> <span class="toc-text">需求分析</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%A1%AC%E4%BB%B6%E9%9C%80%E6%B1%82"><span class="toc-number">1.2.1.</span> <span class="toc-text">硬件需求</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%9C%80%E6%B1%82"><span class="toc-number">1.2.2.</span> <span class="toc-text">云服务器需求</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E7%BD%91%E9%A1%B5%E9%9C%80%E6%B1%82"><span class="toc-number">1.2.3.</span> <span class="toc-text">前端网页需求</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B3%BB%E7%BB%9F%E8%AE%BE%E8%AE%A1%EF%BC%88%E5%8C%85%E6%8B%AC%EF%BC%9A%E7%B3%BB%E7%BB%9F%E7%9A%84%E6%A8%A1%E5%9D%97%E7%BB%93%E6%9E%84%E8%AE%BE%E8%AE%A1%E3%80%81%E6%95%B0%E6%8D%AE%E5%AD%98%E5%82%A8%E7%9A%84%E8%AE%BE%E8%AE%A1%EF%BC%89"><span class="toc-number">1.3.</span> <span class="toc-text">系统设计（包括：系统的模块结构设计、数据存储的设计）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B7%E4%BD%93%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.4.</span> <span class="toc-text">具体实现</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9B%B4%E5%A4%9A%E6%BA%90%E7%A0%81%E9%99%84%E4%BB%B6"><span class="toc-number">2.</span> <span class="toc-text">更多源码附件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E9%A1%B5login-html"><span class="toc-number">2.1.</span> <span class="toc-text">登录页login.html</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E9%A1%B5%E6%A0%B7%E5%BC%8Flogin-css"><span class="toc-number">2.2.</span> <span class="toc-text">登录页样式login.css</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A6%96%E9%A1%B5index-html"><span class="toc-number">2.3.</span> <span class="toc-text">首页index.html</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A6%96%E9%A1%B5%E6%A0%B7%E5%BC%8Findex-css"><span class="toc-number">2.4.</span> <span class="toc-text">首页样式index.css</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E6%97%B6%E6%B8%A9%E5%BA%A6%E9%A1%B5realTemp-html"><span class="toc-number">2.5.</span> <span class="toc-text">实时温度页realTemp.html</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E6%97%B6%E6%B9%BF%E5%BA%A6realHumidity-html"><span class="toc-number">2.6.</span> <span class="toc-text">实时湿度realHumidity.html</span></a></li></ol></li></ol></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By XiaoZiYan</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><p><a style="margin-inline:5px"target="_blank" href="https://hexo.io/"> <img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为 Hexo" alt="HEXO"></a><a style="margin-inline:5px"target="_blank"href="https://butterfly.js.org/"> <img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用 Butterfly" alt="Butterfly"></a><a style="margin-inline:5px"target="_blank" href="https://www.jsdelivr.com/"> <img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用 Jsdelivr 为静态资源提供CDN加速" alt="Jsdelivr"></a><a style="margin-inline:5px"target="_blank" href="https://github.com/"> <img src="https://img.shields.io/badge/Source-gitee-d021d6?style=flat&logo=Gitee" title="本站项目由 Gitee 托管" alt="Gitee"></a><a style="margin-inline:5px"target="_blank"href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> <img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" alt="img" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/xiaoziyan/js/utils.js"></script><script src="/xiaoziyan/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"></div><script src="./js/sakura.js"></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="true"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script data-pjax>function electric_clock_injector_config(){
                var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
                var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>';
                console.log('已挂载electric_clock')
                // parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错，但不影响使用(支持pjax跳转)
            }if( document.getElementsByClassName('sticky_layout')[0] && (location.pathname ==='all'|| 'all' ==='all')){

            electric_clock_injector_config()
        } </script><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><script data-pjax  src="https://cdn.jsdelivr.net/gh/Zfour/hexo-electric-clock@1.0.6/clock.js"></script><!-- hexo injector body_end end --></body></html>